【JavaScript】ajaxとPromise

Contents

1. Promiseとは
2. 状況
3. 方法
4. 参照

Promiseとは

非同期処理において処理が完了した時点で結果(値)を返す。
処理中は、待機状態に入り(何もしない)、処理完了後に履行(完了)か拒否(失敗)を返す。
その後、then()によって履行か拒否かを問わず、関連づけられたハンドラーが呼び出されるが、ここに競合は発生せず、一つの処理が完了した時点で次に控えた処理が実行される。
then()によって追加されたコールバックは、それ以前の処理が完了しなければ呼び出されないため、順に一つずつ処理したい場合に使える。
then()とcatch()で成功か否か分けてやることができる。また、複数のthen()で連結させることもできる。

状況

非同期処理が複数ある場合に、一つ前の非同期処理で得た変更が上手く次の非同期処理に反映されずに、意図した結果が得られない場合。一つずつ非同期処理を完了させた状態でやり取りしたい場合。

方法

return new Promise((resolve, reject) => {
  setTimeout(() => {
    test();//先に実行させたい処理、ajax処理
    resolve();
  }, 300);
}).then(() => {
//完了後に実行したい処理、ajax処理
  next();
})

処理を完了させた状態で次の非同期処理に移ることで、意図したようにデータを反映させることができた。