JavaScript による非同期処理についてのノート

// 参考ページ https://jsprimer.net/basic/async/

// 同期処理で例外をキャッチする例
try {
  throw new Error('同期処理のエラー。最も基本的な例外処理。');
} catch (e) {
  console.log(e.message);
}

// 非同期処理内の例外処理ができない例
try {
  setTimeout(() => {
    // throw new Error(
    //   '非同期処理のエラー。これはキャッチできない。tryブロックの外で実行されるので。'
    // );
  }, 1000);
} catch (e) {
  console.log(e.message);
}

// 非同期処理内で例外処理できるが、外では例外をキャッチできない例
setTimeout(() => {
  try {
    throw new Error(
      '非同期処理のエラー。これは非同期処理の中でキャッチできるが、非同期処理の外からはわからない。'
    );
  } catch (e) {
    console.log(e.message);
  }
}, 2000);

// エラーファーストコールバックで非同期処理の成功を伝える例。
dummyFetch('success/', (error, response) => {
  if (error) {
    console.log(
      '非同期処理で例外が発生しました。callback関数の引数にエラーオブジェクトを渡たされています。'
    );
    console.log(error.message);
  } else {
    console.log('非同期処理が成功しました。');
    console.log(response);
  }
});

// エラーファーストコールバックで非同期処理の例外をキャッチする例
dummyFetch('failure/', (error, response) => {
  if (error) {
    console.log(
      '非同期処理で例外が発生しました。callback関数の引数にエラーオブジェクトを渡たされています。'
    );
    console.log(error.message);
  } else {
    console.log('非同期処理が成功しました。');
    console.log(response);
  }
});

asyncTowCallBack(
  'failure/',
  (response) => {
    console.log(response);
  },
  (error) => {
    console.log(error.message);
  }
);

/**
 * 非同期処理の結果を返すダミーダミー関数です。
 * @param path
 * @param callback エラーファーストコールバック。第一引数にエラーオブジェクト、第二引数以降にデータを受け取る関数です。
 */
function dummyFetch(path, callback) {
  setTimeout(() => {
    if (path.startsWith('success/')) {
      callback(null, { body: 'レスポンスの本文です。' });
    } else {
      callback(new Error('データの取得に失敗しました。'));
    }
  }, 3000);
}

/**
 * 非同期処理の成功・失敗それぞれのコールバックを受け取るサンプル関数。
 * @param {*} path
 * @param {*} successCallback 成功した場合のコールバック関数
 * @param {*} failureCallBack 失敗した場合のコールバック関数
 */
function asyncTowCallBack(path, successCallback, failureCallBack) {
  setTimeout(() => {
    if (path.startsWith('success/')) {
      const response = { body: 'レスポンスの本文です。' };
      successCallback(response);
    } else {
      failureCallBack(new Error('データの取得に失敗しました。'));
    }
  }, 4000);
}

/**
 * 非同期処理を行いPromiseを返すサンプル関数。
 * Promiseコンストラクター
 * Promiseインスタンスを作成しexecutorと呼ばれる関数を渡す。
 * resolveメソッドで成功した場合、rejectメソッドで失敗した場合の通知を行う。
 */
function asyncProcess(path) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (path.startsWith('success/')) {
        resolve({
          body: `${path}へのリクエストに対するレスポンスの内容です。`,
        });
      } else {
        reject(new Error('非同期処理の例外が発生しました。'));
      }
    }, 1000);
  });
}

// thenでresolveで呼ばれるコールバック、catchでrejectで呼ばれるコールバックを登録
asyncProcess('success/')
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
  });

// catchはthenメソッドのonRejectedと同じ意味のシンタックスシュガー。catchはthenメソッドのエイリアスとも言える。
asyncProcess('failure/')
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
  });

// 構文；p.then(onFulfilled[, onRejected]);
// thenの引数に成功コールバック、失敗コールバックを登録する構文もある。
asyncProcess('failure/').then(
  (value) => {
    console.log(value);
  },
  (reason) => {
    console.log(reason);
  }
);

// 成功時の処理のみ
function delay(timeoutMs) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(`${timeoutMs}ミリ秒後に解決されました`);
    }, timeoutMs);
  });
}

delay(2000).then((response) => {
  console.log(response);
});

// 失敗時の処理のみ
function errorPromise(message) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error(message));
    }, 2000);
  });
}

// then(undefinde, onRejectedCallBack)と意味は同じだがcatchを使うのが推奨。
errorPromise('失敗したときだけエラーをキャッチします。').catch((error) => {
  console.log(error.message);
});

// 暗黙のtry...catch文。Promiseコンストラクタ内で例外が発生したら自動的にPromiseは拒否状態になり例外が投げれれる。
// https://ja.javascript.info/promise-error-handling が詳しいエラーハンドリングを説明している。
new Promise((resolve, reject) => {
  // throw new Error('例外');
}).catch((error) => {
  console.log(error);
});

// Promiseの状態遷移 基本1回状態変化したら後は変化しない性質(settled)
const promise1 = asyncProcess('success/');
console.log(promise1); // fulfilled状態のPromise
const promise2 = asyncProcess('failure/');
promise2.catch((error) => {
  console.log(promise2); // rejected状態のPromise
  console.log(error);
});

/**
 * 1 解決状態のPromiseを作成する
 * 2 特定の値で解決されるPromiseを作成する
 * 3 解決済みのPromiseにthenで(常に非同期で実行される)コールバックを登録する。
 * 4 拒否状態のPromiseを作成する
 * 5 拒否状態のPromiseに非同期コールバックを関数を登録する
 */
const fulfilledPromise = Promise.resolve();

console.log(fulfilledPromise);

console.log(Promise.resolve(10));

fulfilledPromise.then(() => {
  console.log(
    '解決済みのPromiseにコールバック処理を登録。これは常に非同期で実行される。'
  );
});
console.log('解決済みPromiseに追加した非同期処理の直後の同期処理');

// const rejectedPromise = Promise.reject(new Error('拒否状態Promiseのエラー'));
// console.log(rejectedPromise);

/**
 * Promiseチェーン
 */

// thenはpromiseを返すので続けてthenメソッドを実行できる。
Promise.resolve()
  .then(() => {
    console.log('promiesチェーンの1回目の成功コールバック');
  })
  .then(() => {
    console.log('promiesチェーンの2回目の成功コールバック');
  });

// 1回目でrejected Promiseを返すのでcatchに処理が移る。
Promise.resolve()
  .then(() => {
    console.log('promiesチェーンの1回目の成功コールバック');
    throw new Error('thenメソッド内の例外発生');
  })
  .then(() => {
    console.log('promiesチェーンの2回目の成功コールバック');
  })
  .catch((error) => {
    console.log(error.message);
  })
  .then(() => {
    console.log(
      'catchメソッド実行後はfulfilled Promiseを返すのでこのコードは実行される。'
    );
    return 1;
  })
  .then((value) => {
    console.log(`直前のthenメソッドで返された${value}を受け取って出力する。`);
  });

/*
 * 成功失敗に関わらず最後に行いたい処理をfinally()で実行する。
 * https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally
 */

// 複数の非同期処理の逐次処理 thenメソッドで実行したい順番でつないでいく
const results = [];
asyncProcess('success/data_1')
  .then((response) => {
    results.push(response.body);
    return asyncProcess('success/data_2'); // Promiseを返して次のthenで処理する
  })
  .then((response) => {
    results.push(response.body);
    return asyncProcess('success/data_3');
  })
  .then((response) => {
    results.push(response.body);
  })
  .then(() => {
    console.log(results);
  });

// 複数の非同期処理の並列処理。promise.all()を使う。逐次処理より早い。１つreject状態だと全体もreject状態になる。
let jobs = [];
jobs = Promise.all([
  asyncProcess('success/data_1'),
  asyncProcess('success/data_2'),
  asyncProcess('success/data_3'),
]);

// 分割代入でPromiseの配列を個々のの変数に分解して代入する
jobs.then(([response1, response2, response3]) => {
  console.log(response1.body);
  console.log(response2.body);
  console.log(response3.body);
});

// 複数の非同期処理の並列処理 promise.race()
// 複数の非同期処理の内で1番早く成功または失敗したPromiseが返される。レースさせるイメージ。
// 以下のような関数を使って非同期処理のタイムアウト処理を実装できる。
function timeout(timeoutMs) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error(`Timeout: ${timeoutMs}ミリ秒経過`));
    }, timeoutMs);
  });
}

/* eslint-disable prefer-const */

// 参考ページ https://jsprimer.net/basic/async/

// asyncキーワードで非同期関数を定義でき、これは解決されたpromiseを返す関数である。値はPromiseインスタンスにラップされる。
// ケース1: 値を返すと、その値をもつfulfilled Promiseが返される。
async function doasyncA() {
  return 'この値で解決されました。';

  // 明示的に解決されたPromiseを返すことを示す記法
  // return Promise.resolve('この値で解決されました。');
}

console.log(doasyncA());
doasyncA().then((value) => {
  console.log(value);
});

// ケース2: Promiseを返すと、それがそのまま返される
async function doasyncB() {
  return Promise.resolve('解決された値');

  // catchできない？rejectとcatchの関係がうまくいかない...
  // return Promise.reject('エラーメッセージ');
}
console.log(doasyncB());

// ケース3: 例外が発生したら、エラーを持つrejectedなpromiseが返される。

// 非同期関数の表現いろいろ
// 関数宣言
async function funcA() {}
// 関数式
const funcB = async function () {};
// 関数式 arrow関数
const funcC = async () => {};
// // メソッドの短縮記法のAsync Function版 ?
const obj = { async method() {} };

// await式はどんな場合に何を返すか？
// awaitの右辺のPromiseが解決されるとawait式は値を返す。
// then(callback)を書かなくていいことがポイント。
async function doasyncC() {
  const value = await Promise.resolve('解決された値');
  console.log('このステップは上の非同期処理が完了しないと実行されない。');
  console.log(value);
}
doasyncC();
console.log(
  `非同期関数doasyncCの完了をawaitしているわけではないのでこのステップは同期的に実行されます。
  await式を書いたasync functionの外では、同期的に処理が進む、という挙動をわかっておくこと。`
);

// Promiseはreject状態なのでawaitはその場でエラーをスローする。
// 通常の非同期処理のように次のステップの実行が行われないので、tryブロック内で例外を自動的にキャッチできる。
// then(callback).catch(callback)のように書かなくていいことがポイント。try...catch構文で非同期処理のエラーも扱えるようになる。
async function doasyncD() {
  try {
    const value = await Promise.reject(new Error('エラーメッセージ'));
  } catch (error) {
    console.log(error.message);
  }
}
doasyncD();

// async/await構文で逐次的な非同期処理を書く。

function dummyFetch(path) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (path.startsWith('success/')) {
        resolve({ body: `${path}のデータ` });
      } else {
        reject(new Error('データ取得失敗しました。'));
      }
    }, 1000 * Math.random());
  });
}

// then(callback)で非同期処理を順次呼び出すようなややこしい記法をしなくてすむことがポイント。
// 同期処理かのように非同期処理の逐次処理を書けるようになっている。
async function fetchResource() {
  let results = [];
  const responseA = await dummyFetch('success/a'); // データを取得
  results.push(responseA.body); // データを配列に格納
  const responseB = await dummyFetch('success/b');
  results.push(responseB.body);
  return results;
}

fetchResource().then((results) => {
  console.log(results);
});

/**
 * 複数の非同期処理をループ内で順番に実行する。直列、逐次処理。
 * async/await構文 と for文 の組み合わせ
 * awaitで各処理の実行完了を待つので同期処理のようになり時間がかかる。
 */

/**
 * 複数の非同期処理を互いに完了を待たずに並列して実行する。
 * async/await構文 と PromiseAll() の組み合わせ
 * 実行順序に意味がないなら逐次実行より実行時間が短くなる。
 */

/**
 * Githubユーザー情報を取得する非同期関数です。
 * @param {string[]} names Githubユーザー名
 * @returns {Object[]} Githubユーザー情報
 */
async function getUsers(names) {
  let users = [];
  try {
    for (let name of names) {
      let response = await fetch(`https://api.github.com/users/${name}`);
      if (response.ok) {
        let user = await response.json();
        users.push(user);
      } else {
        users.push(null);
        let httpStatusCode = response.status;
        console.log(
          `HTTP ERROR : ${httpStatusCode} ${name}の取得リクエストは失敗しました。`
        );
      }
    }

    return users;
  } catch (error) {
    alert(error);
  }
}

/**
 * Githubユーザー情報を取得する非同期関数です。
 * @param {string[]} names Githubユーザー名
 * @returns {Object[]} Githubユーザー情報
 */
async function getUsers(names) {
  let jobs = [];
  for (let name of names) {
    let job = fetch(`https://api.github.com/users/${name}`).then(
      (successResponse) => {
        if (successResponse.status !== 200) {
          return null;
        } else {
          return successResponse.json();
        }
      },
      (failResponse) => {
        return null;
      }
    );
    jobs.push(job);
  }

  let results = await Promise.all(jobs);

  return results;
}