【Javascript】Promiseの復習

Promise

Promiseは非同期処理のためのものです。
時間のかかる処理を使う場合に必要です。
ややこしいですがDBやネットワーク処理などかなり使い所が多いのでこれは必ずマスターする必要があります。

まず、目的の処理を作成し、new Promiseでラップします。
成功時はresolve, 失敗時はrejectを呼び出し、値をセットします。
あとはPromiseを関数で返すようにします。

function task(value) {
  return new Promise((resolve, reject) => {
    // 目的の処理
    setTimeout(() => {
      if (value) {
        resolve(value + 1);
      } else {
        reject("error");
      }
    }, 2000);
  });
}

then / catch / finally

結果を処理するための.thenと、エラーを処理するための.catchを定義します。
Promiseで定義した処理が終わったらthenが実行されます。thenではresolveに入れた値が取得されます。
エラー時はcatchが実行されます。ここではrejectに入れた値が取得されます。
ここではcatchを使っていますが、thenの中でエラーハンドリングすることも出来ます。

thenは複数つなげることが出来ます。
thenでreturnするとPromiseが返り、次のthenに値を渡せます。
下記は前のthenの結果を待って、次のthenに値を渡しています。

function main2() {
  task(10)
    .then((value) => {
      console.log(value);
      return task(value); // 加算
    })
    .then((value) => {
      console.log(value);
      return task(value); // 加算
    })
    .then((value) => {
      console.log(value);
      return task(value); // 加算
    })
    .catch((error) => {
      console.log(error);
    })
    .finally(() => {
      console.log("finally");
    });
}

async / await

async / await はPromiseの別の書き方です。
メソッドチェーンをずらずら書かなくても通常の処理のようにかけるのでスッキリします。

Promiseを返す関数の前にawaitをつけると、処理が終わって戻り値を取得するまで待つようになります。
つけなければ、処理が終わる前に戻り地を取得してしまいundefinedになりうまくいきません。
awaitを使う場合は関数定義にasyncをつける必要があります。
asyncをつけた関数は戻り値がPromiseオブジェクトになりますので要注意です。

下記は上のthenを使った処理と全く同じことをしています。
非同期処理の結果を受け取って、さらに非同期処理をしています。

async function main3() {
  let result = 10;
  try {
    result = await task(result);
    console.log(result);
    result = await task(result);
    console.log(result);
    result = await task(result);
  } catch (error) {
    console.log(error);
  } finally {
    console.log(result);
  }
}