• ..

React

    Promise

    いつ完了するか分からない処理を順番に実行するのに使われます。例えば、

    • API のレスポンスが返ってきた時
    • 指定秒スリープした時
    • DOM が出来上がった時

    などです。そのような処理を行えるようにできるクラスとしてPromiseがあります。新しいPromiseインスタンスを作る時にはresolve関数とreject関数を引数として受け取れるコールバック関数を定義します。
    resolveは処理が成功した時に呼ぶもので、rejectは処理が失敗した時に呼ぶものです。

    インスタンスメソッド

    Promise#then

    Promiseインスタンスはコールバック関数内でresolveが呼ばれるとPromise#thenメソッドを呼びます。このメソッドはresolve(arg)が実行された直後に実行されます。resolveに渡した第一引数がPromise#thenの第一引数の値になります。

    const processing = new Promise(resolve => {
      resolve({value: 1});
    });
    
    processing.then(obj => {
      console.log(obj); // {value: 1}
    });

    Promise#catch

    そしてreject(arg)が実行された時に呼ばれるのがPromise#catchです。

    const processing = new Promise((_, reject) => {
      reject({value: 1});
    });
    
    processing.catch(obj => {
      console.log(obj); // {value: 1}
    });