非同期処理 Promise

はじめに

Promiseについて学習したので取り上げる
初学者
基本は備忘録

Promise

実行完了を待たない
並行して次の処理を実行(時間がかかるから)

時間のかかる処理が終了した後に行う処理を登録できる

詳しくはこちらのサイトで確認する
Promiseの復習は合わせてPromise + αも確認する(別のファイル)

Promiseの構成要素は3つしかない

• 処理
• 処理成功時の値
• 処理失敗時の値

基本の構文

let promise = new Promise(function(resolve, reject) {
// executor (生成コード)
})

new Promise へ渡される関数は executor(執行者) と呼ばれます。promise が作成されると、自動的に呼ばれます。それは最終的に結果と一緒に終了する生成コードを含んでいます。

例

 let promise = new Promise(function(resolve, reject) {
  // promise が作られたとき、関数は自動的に実行されます

  // 1秒後、ジョブが "done!" という結果と一緒に完了したことを合図します
  setTimeout(() => resolve("done!"), 1000);
});

覚える基本

new Promiseに渡す関数はexecutorと呼ばれpromiseが作成されると自動的に実行する
executorはresolve,rejectの二つの引数を持っている
executorの中で関数(job)を定義(大抵は時間のかかる処理)する
jobの中では最後にresolveを実行する
成功時にはresolveの引数が結果に返る　失敗時はrejectの引数が返る
jobに複数のresolveがある場合最初のresolve以外無視される

then系統について押さえる

使い方はこれ
thenはexecutorの実行が終了し、Promiseの状態が確定した後に行われる
thenに渡した関数の最初の引数にはresolveの実引数が入る
thenを複数繋げた場合先のthenが終了するまで次のthenは実行されない
resolveの実引数を2個目以降のthenで利用するには直前のthenでreturnする

let promise = new Promise(resolve => {
  setTimeout(() => resolve("done!"), 1000);
});

promise.then(() => alert; // 1秒後に "done!" を表示

catch

エラーの場合のみ呼び出される

let promise = new Promise((resolve, reject) => {
  setTimeout(() => reject(new Error("Whoops!")), 1000);
});

// .catch(f) は promise.then(null, f) と同じです
promise.catch(alert); // 1秒後に "Error: Whoops!" を表示

fainally

通常の try {...} catch {...} に finally 節があるように、Promise にも finally があります。

.finally(f) 呼び出しは、Promise が決着したとき(解決または拒否になったとき)に必ず実行されるという意味で .then(f, f) に似ています。

finally はクリーンアップを実行するのに便利なハンドラです。例えば、結果がどちらであっても、もう不要となったので読み込み中のインジケータを停止するなどです。

このようになります:

new Promise((resolve, reject) => {
  /* 時間のかかる処理を行い、その後 resolve/reject を呼び出す */
})
  // 成功か失敗かは関係なく、promise が確定したときに実行されます
  .finally(() => 読込中のインジケータを停止する )
  .then(result => 結果を表示する, err => エラーを表示する)

Promiseを利用した例

//msに渡した秒数分待ってから.thenを実行する
const delay = (ms) => {
  return new Promise((resolve, reject) => {
    settimeout(resolve, ms)
  })
}

delay(3000).then(() => alert('run afeter 3 seconds'));

Promiseのチェーンを繋ぐ場合

最初のthenで受け取った引数を後ろで使いたい場合returnで送る必要がある

.then((data) => {
console.log('1回目: ' + data)
return data;
})
.then((data) => console.log('2回目' + data))

thenの中でthrow new Error()でエラーを起こせる

returnさせるとき

thenの戻り値としてPromiseが実行される場合にはその処理が解決するまで次のthenは待機する

使用時のポイント

非同期処理を含む関数を作りたいときは、関数を作成したらすぐにreturn new PromiseでPromiseオブジェクトを返す関数を作成するとスムーズ

終わりに

基本的にasync等を使って記述するが、Promiseの理解は必要