はじめに

この記事は以下の記事の続きです。
非同期処理についてまとめてあるので、先にこちらをご覧ください。

簡単にまとめておきます。

JavaScriptでは、プログラムの実行はシングルスレッドで行われる
非同期処理はAPIコールなどの時間がかかる処理で使われる
ひとつの非同期処理が終わるのを待たずに次の処理を進める
非同期処理はイベントループという仕組みによって、同時に複数の処理を実行することができる
非同期処理の中で例外が発生しても、非同期処理の外ではそれを感知できない

今回は非同期処理が完了した後にどうするか？を書くための方法について考えます。
非同期処理でエラーが起きた時、成功した時、どちらも書く方法があります。
それがPromise、aysnc/awaitです。

Promise

PromiseはES2015で導入された非同期処理の状態や結果を表現するビルトインオブジェクトです。

ビルドインオブジェクトとはJavaSctiptに最初から組み込まれているオブジェクトです。自前で定義しなくても勝手に使えます。

JavaScript Primerを読んでも言葉が難しくてよくわからなかったので重要そうなところだけまとめます。

非同期処理はPromiseインスタンスを返す
Promiseインスタンスは非同期処理が成功(resolve) / 失敗(reject)した時にどうするかをthen/catchメソッドに書いておける
- 成功した時=>thenの第一引数に書く
- 失敗した時=>thenの第二引数、catchに書く
Promiseのthen/catchメソッドは、メソッドチェーンで繋げて書ける（Promiseチェーン）

// 非同期処理をする部分
// asyncPromiseTask関数は、Promiseインスタンスを返す
const asyncPromiseTask = () => {
    return new Promise((resolve, reject) => {
        // 非同期処理に成功した場合は、resolveを呼ぶ
        // 非同期処理に失敗した場合は、rejectを呼ぶ
    });
}

// 非同期処理の結果を扱う部分
// asyncPromiseTask関数の非同期処理が成功した時、失敗した時に呼ばれる処理をコールバック関数として登録する
asyncPromiseTask().then(()=> {
    // 非同期処理が成功したときの処理
}).catch(() => {
    // 非同期処理が失敗したときの処理
});

Promiseについてはこれで十分ではないでしょうか。というよりも難しくてわかりませんでした😭
とりあえず今はこの理解だけで逃げます！！！！

Promiseの問題点

Promiseのthen/catchメソッドによって、非同期処理が完了したらその結果を感知して何をするか？を簡単に書くことができます。
ただし、Promiseにはいくつか問題点があります。

次の非同期処理をしたい、非同期処理を実行して返ったきた結果を使いたい時
- ⇒非同期処理間で連携するためにはPromiseチェーンを繋げないといけない
条件分岐したい時
- ⇒ネストが深くなる
書いた順に実行されない可能性がある
- =>ソースコードが読みにくい

const exampleProblem = () => {
  fetchData()
    .then((data) => {
      console.log("Data:", data);

      if (shouldProcessData(data)) {
        // ネストが深くなる
        return processValidData(data);
      } else {
        return processInvalidData(data);
      }
    })
    .then((result) => {
      // チェーンが長くなる
      console.log("Result:", result);
    })
    .catch((error) => {
      console.error("Error:", error);
    });
}

わーなんて読みにくいんでしょう😇
タイマーとかセットされていたら、実行される順番もぐちゃぐちゃになってしまいます。
これがPromiseの問題点です。

せっかくthenとcatchという便利メソッドが使えるのに、それが返ってコードの読みにくさを生んでしまっています。
これを改善するために生まれたのが、async/awaitです。

ES2017では、Async Functionという非同期処理を行う関数を定義する構文が導入されました。
Async Functionは必ずPromiseインスタンスを返すので、そもそもPromiseがわかっていないと話になりません。

非同期処理難しすぎませんかね？
ちっともわからない😭
明日はAsync Functionについてまとめます。

参考