非同期処理Promiseについて

非同期処理について

JavaScriptでは非同期処理を行う選択肢は主に3種類あります。
「Promise」「async〜await」「Observable」です。
ここではPromiseについて記載します。

Promiseの特徴

非同期処理の完了を待ち合わせ、成功した場合、失敗した場合の処理を登録することができます。
また、複数の非同期処理を纏めて実行し、全ての完了を待ち合わせることもできます。

構文

利用側

一つの非同期処理を実行する

asyncFunction(parameter).then(closureOfSucceedCase).catch(closureOfFailureCase);

closureOfSucceedCaseには非同期処理が成功した時の処理を登録し、
closureOfFailureCaseには失敗したときの処理を登録することができます。

(非同期実行結果から受け取るパラメータ) => { 非同期が完了したときの処理 }

例) REST APIを呼ぶときのサンプルコード

// ①
const url = 'http://127.0.0.1:4300/newsfeeds';
// ②
this.httpClient.get(url).toPromise().then(response => {
  // ⑤ (成功時のみ)
  const newsfeeds = new Newsfeeds();
  newsfeeds.decode(response);
  resolve(new Response(newsfeeds));
  // ⑥ (成功時のみ)
}).catch(error => {
  // ⑤ (失敗時のみ)
  console.error(error);
  reject(error);
  // ⑥ (失敗時のみ)
});
// ③
console.log('非同期が終わる前に動く');
// ④

コード内に数字を埋め込みましたが、処理は数字の順に動きます。
⑤⑥は非同期処理が完了したときに呼ばれますので、③や④より後に動作します。
⑤⑥はサーバからレスポンスが返ってきたときに動作します。

複数の非同期処理の完了を待ち合わせる

下記のように記載します。

const promises = [];
promises.push(new Promise((resolve, reject) => {
  // 非同期処理を実行する
  // 非同期処理が成功したらresolve()を呼ぶ
  // 非同期処理が失敗したらreject()を呼ぶ
});
// ↑promisesに必要な分非同期処理を追加する

Promise.all(promises).then(closureOfSucceedCase).catch(closureOfFailureCase);

closureOfSucceedCaseはpromisesに登録した非同期処理が全て成功した場合に呼び出され、
closureOfFailureCaseはpromisesに登録した非同期処理が一つでも失敗した場合に呼び出されます。

提供側

Promiseを提供する処理は下記のように記載します。

asyncFunction(parameter): Promise<型> {
  return new Promise((resolve, reject) => {
    // 何か処理をする
    if (xx) {
      // 成功した場合はresolve()を呼ぶ
      // すると呼び出し元でthen()に設定したクロージャが動き出す
      // 引数にはthen()のクロージャに渡すパラメータを入れる
      resolve(data);
    } else {
      // 失敗した場合はreject()を呼ぶ
      // すると呼び出し元でcatch()に設定したクロージャが動き出す
      // 引数にはcatch()でクロージャに渡すパラメータを入れる
      reject(error);
    }
  });
}