Promise

非同期処理の完了を待つ

非同期処理の完了後に他の処理を行いたい場合は非同期処理.then().catch()といった形に、チェーンメソッドでthen()とcatch()を続ければOK

then()：非同期処理が正常終了した際に呼ばれるメソッド
catch()：非同期処理が異常終了した際に呼ばれるメソッド

.js

function modifiedAsyncFunction() {
  return new Promise((resolve, reject) => {
    try {
      // 1秒後に"非同期処理完了"とコンソールに出力
      setTimeout(() => {
        console.log("非同期処理完了");
        // returnの代わりに正常終了したことを表すresolveを返す
        resolve();
      }, 1000)
    } catch (e) {
      // 異常終了時の処理

      // returnの代わりに異常終了したことを表すresolveを返す
      reject();
    }
  })
}

modifiedAsyncFunction().then(() => {
  console.log("resolve後の処理が実行されました");
}).catch(e => {
  console.log("reject後の処理が実行されました");
})

非同期で処理した後に、その値を取得する

非同期処理中に取得した値を活用したい場合
then()メソッドとcatch()メソッドはそれぞれ引数を取ることができるので、それらを活用する

.js

function modifiedAsyncFunction() {
  return new Promise((resolve, reject) => {
    try {
      // 1秒後に"非同期処理完了"とコンソールに出力
      setTimeout(() => {
        console.log("非同期処理完了");
        const num = 1;
        resolve(num);
      }, 1000)
    } catch (e) {
      // 異常終了時の処理

      // returnの代わりに異常終了したことを表すresolveを返す
      reject(e);
    }
  })
}

modifiedAsyncFunction().then((num) => {
  console.log(`引数で受け取った値：${num}`);
}).catch(e => {
  console.log(`引数で受け取った値：${e}`);
})

非同期処理（async）

メインスレッドから処理が切り離される
asyncは、非同期関数を作るもの

・async functionは呼び出されるとPromiseを返す。
・async functionが値をreturnした場合はその値をresolveする。
・async functionが例外をthrowした場合はその値をrejectする。

同期処理（sync）

メインスレッドでコードが順番に処理される
awaitは非同期処理の完了を待つためのものです。
Promiseの結果（resolveもしくはreject）が返されるまで待機する（処理を一時停止する）演算子のこと

.js

function modifiedPromiseFunction() {
  return new Promise((resolve, reject) => {
    try {
      resolve("成功");
    } catch (e) {
      reject("失敗");
    }
  });
}

async function modifiedAsyncFunction() {
  try {
    return "成功";
  } catch (e) {
    throw "失敗";
  }
}

modifiedPromiseFunction().then(txt => {
  console.log(txt);
}).catch(e => {
  console.error(e);
});

async function main() {
  const txt = await modifiedAsyncFunction();
  console.log(txt);
}

main();

▲ awaitはthen()とcatch()を置き換えている、ということ
非同期関数に対してawaitを使うことでresolve()やreject()で返される値を待つことができる

Promise.all

Promise.all([taskA, taskB]).then(() => {})
配列内の全てのオブジェクトがresolveされたタイミングでthenメソッドが呼ばれる

.js

// 非同期処理1
function asyncFunction1() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('処理1');
    }, 1000);
  });
}

// 非同期処理2
function asyncFunction2() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('処理2');
    }, 2000);
  });
}

// 非同期処理3
function asyncFunction3() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('処理3');
    }, 1500);
  });
}

// Promise.allで3つの非同期処理を実行
Promise.all([asyncFunction1(), asyncFunction2(), asyncFunction3()])
  .then((results) => {
    console.log(results); // 全ての結果が配列として返される
  })
  .catch((error) => {
    console.error(error); // エラーハンドリング
  });

※ 注意点
いずれかの非同期処理が1つでもrejectしてしまうと、Promise.allのthenが呼び出されない
たとえ1つがrejectされても続行してほしい！って時に使えるのがPromise.allSettled ▼

Promise.allSettled

複数の非同期処理を実行し、それぞれの処理の結果（成功または失敗）をまとめて取得するためのメソッド
Promise.allSettledはすべてのプロミスの結果を待つ
成功した処理や失敗した処理の結果を取得することができる

.js

function asyncFunction1() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('処理1');
    }, 1000);
  });
}

function asyncFunction2() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error('処理2でエラーが発生しました'));
    }, 2000);
  });
}

function asyncFunction3() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('処理3');
    }, 1500);
  });
}

Promise.allSettled([asyncFunction1(), asyncFunction2(), asyncFunction3()])
  .then((results) => {
    console.log(results);
  });

▼ もっと詳しくてわかりやすいです
【JavaScript】非同期処理まとめ