JavaScriptにおける同期スタイルのプロミス

Promise hell問題を解決するために、 非同期コードをはるかに簡単に書けるようにする 特別なプロミス構文が考案されました - 同期スタイルで書くことができます。

それでは、その学習を始めましょう。まずは 前のレッスンのコードを見てみます：

javascriptfunction func() {
  getSmth(2).then(res => {
    console.log(res); // 4を出力
  });
}

func();

もし関数getSmthが同期関数だった場合、 関数funcのコードは次のように書き換えることができたでしょう：

javascriptfunction func() {
  let res = getSmth(2);
  console.log(res); // 4を出力
}

しかし、関数getSmthは非同期なので、 上記のコードは動作しません。 ですが、プロミスの同期スタイルを利用すれば、 同様のことを実現できます。やってみましょう。

まず、特別なキーワードasyncを使って 関数funcを非同期関数として宣言する必要があります：

javascriptasync function func() {
  
}

その後、関数func内部で特別なキーワード awaitを使用できるようになります。 このキーワードはプロミスの前に書くことで、 JavaScriptにそのプロミスが完了するまで待機させます。 その後、このキーワードはプロミスの結果を返し、 コードの実行が再開されます。

今回の場合、getSmthの呼び出しの前に awaitを書く必要があります。 この関数の呼び出し結果はプロミスなので、 そのプロミスが完了した後にのみコードの実行が続行されます。 そして、プロミスの結果を変数に代入できます。 上記を実装してみましょう：

javascriptasync function func() {
  let res = await getSmth(2);
  console.log(res); // 4を出力
}

func();

では、getSmthを複数回呼び出してみましょう：

javascriptasync function func() {
  let res1 = await getSmth(2);
  let res2 = await getSmth(3);
  
  console.log(res1 + res2); // 13を出力
}

func();

次に、ループ内でgetSmthを呼び出してみます：

javascriptasync function func() {
  let arr = [1, 2, 3, 4, 5];
  let sum = 0;
  
  for (let elem of arr) {
    sum += await getSmth(elem);
  }
  
  console.log(sum);
}

func();

javascriptfunction func() {
  getSmth(2).then(res1 => {
    getSmth(3).then(res2 => {
      getSmth(4).then(res3 => {
        console.log(res1 + res2 + res3);
      });
    });
  });
}

func();