JavaScriptの「then()」に苦しんだ話

　Webアプリの作成中，非同期処理で作成した変数を別の場所で使用したら「Undefined」になってしまいました．この問題を解決するために，「then()」という関数を使用しました．しかし，このthenという機能がなかなか難しかったので，備忘録として残します．

Promise
then()
catch()，finally()
参考文献

Promise

　then()の説明をするには，先にPromiseの説明をする必要があります．Promiseは「Promiseオブジェクト」のことであり，非同期処理の状態とその結果の値を表します．Promiseの状態には，

待機(pending)：初期状態，非同期処理が実行中
履行(fulfilled)：非同期処理が成功
拒否(rejected)：非同期処理が失敗

が存在します．then()は，Promiseの状態と結果を受け取って処理を行う関数ということがわかります．

then()

　mdn web docs¹によると，「then()はPromiseオブジェクトのメソッドであり，最大 2 つの引数として，Promiseが成功した場合と失敗した場合のコールバック関数を取ります．」という機能らしいです．簡単にいうと，非同期処理が終わったらコールバック関数が発動させるという関数です．

　then()は2つの引数があります．1つ目の引数には，Promiseが「fulfilled」状態の時のコールバック関数が入ります．2つ目の引数には，Promiseが「rejected」状態の時のコールバック関数が入ります．

　下のプログラムは，Promiseとthen()の簡単な使い方です．Promiseで，resolve(value);をすると，Promiseの状態が履行になり，返り値としてvalueを渡します．そのため，then()の第一引数の無名関数が呼び出されます．その結果，ログに「test」と表示されます．

const promise_test = new Promise((resolve, reject) => {
  resolve('test');
});

promise_test
  .then((value) => {
  	console.log(value);
  });

>> "test"

catch()，finally()

　then()と同じような使用方法の関数に，catch()とfinally()が存在します．catch()は，非同期処理の結果が，拒否だった場合に第一引数のコールバック関数を呼び出します．catch() は，then()の第二引数にコールバック関数を設定した場合と同じ挙動をします．また，finally()は，非同期処理が完了した場合に第一引数のコールバック関数を呼び出します．ただし，finally()は非同期処理の結果に作用されません．そのため，非同期処理が成功しても失敗しても呼び出されます．

　下のプログラムは，先ほどのプログラムにcatch()とfinally()の処理を付け足したものです．Promiseで，reject(value);をすると，Promiseの状態が拒否になり，返り値としてvalueを渡します．そのため，catch()の第一引数の無名関数が呼び出されます．その結果，ログに「Error : result」と表示されます．また，finally()は最後に必ず実行されるため，ログに「end」と表示されます．

const promise_test = new Promise((resolve, reject) => {
  reject('result');
});

promise_test
  .then((value) => {
    //成功
  	console.log("Success : " + value);
  })
  .catch((value)=>{
　　//失敗
  	console.log("Error : " + value);
  })
  .finally(()=>{
　　//必ず実行
    console.log("end");
  });

>> "Error : result"
>> "end"

参考文献

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/then ↩︎