JavaScriptにおけるpromiseのthen()方法及びチェーン呼び出し

3694 ワード


一つのプロミスは非同期の操作が最終的に完成または失敗した結果の対象です.
Promiseは本質的には、コールバック関数内部に転送するのではなく、コールバックのオブジェクトを結びつけている.
createAudioFileAsync()という関数が存在すると仮定して、この関数は非同期的に音声ファイルを生成し、音声ファイルの作成に成功したか、または作成に失敗した後に、コールバック関数を実行します.
以下はcreateAudio FileAsync()を使用する例である.
//        
function successCallback(result) {
  console.log("        : " + result);
}

//        
function failureCallback(error) {
  console.log("        : " + error);
}

createAudioFileAsync(audioSettings, successCallback, failureCallback)
関数がPromiseオブジェクトに戻る場合:
const promise = createAudioFileAsync(audioSettings); 
promise.then(successCallback, failureCallback);
createAudioFileAsync(audioSettings).then(successCallback, failureCallback);
これを非同期関数呼出しと呼びます.この形式にはいくつかの利点があります.
約束する
旧式の着信リプライとは違って、Promiseを適用する際には、次のような約束があります.
  • は、JavaScriptイベントキューの現在の実行が完了するまで、コールバック関数は永遠に呼び出されません.
  • .then形式で追加されたコールバック関数は、非同期動作が完了した後に追加された関数でさえ呼び出しられます.
  • は、複数回の呼び出しにより、挿入順序に従って独立して動作する複数のコールバック関数を追加することができる.
  • そのため、Promiseの一番のメリットはチェーンコールです. 
    チェーンコール
    一般的な需要は、2つ以上の非同期動作を連続的に実行することであり、この場合、それぞれの後の動作は前の動作が成功した後、前のステップの動作から戻った結果を持って実行を開始する.私たちはPromise chainを作ることによってこの需要を完成することができます.
    奇跡を目撃した瞬間:then関数は新しいPromiseに戻ります.元のものとは違います. 
    const promise = doSomething();
    const promise2 = promise.then(successCallback, failureCallback);
    
    
    または 
    const promise2 = doSomething().then(successCallback, failureCallback);
    
    第二のオブジェクトは、doSomething()関数の完了を表すだけでなく、あなたが入ってきたsuccessCallbackまたはfailureCallbackの完了をも表しています.これは他の非同期関数が戻ってきたPromiseかもしれません.このようにすれば、promise2に追加された任意のコールバック関数が並べられます.  successCallback または  failureCallback 帰ってきたPromiseの後ろ.
    基本的に、各Promiseはチェーンにおける別の非同期プロセスの完成を表している.
    過去に、複数の非同期操作をすると、経典の逆転地獄を引き起こします.
    doSomething(function(result) {
      doSomethingElse(result, function(newResult) {
        doThirdThing(newResult, function(finalResult) {
          console.log('Got the final result: ' + finalResult);
        }, failureCallback);
      }, failureCallback);
    }, failureCallback);
     新しい関数を通して、私達は戻るPromiseにチューニングを結びつけて、これまでのやり方に取って代わり、Promiseチェーンを形成します.
    doSomething().then(function(result) {
      return doSomethingElse(result);
    })
    .then(function(newResult) {
      return doThirdThing(newResult);
    })
    .then(function(finalResult) {
      console.log('Got the final result: ' + finalResult);
    })
    .catch(failureCallback);
    then内のパラメータはオプションでcatch(failureCallback)です. はい、  then(null, failureCallback)のサムネイル形式.下記に示すように、arrow function(矢印関数)でも表します.
    doSomething()
    .then(result => doSomethingElse(result))
    .then(newResult => doThirdThing(newResult))
    .then(finalResult => {
      console.log(`Got the final result: ${finalResult}`);
    })
    .catch(failureCallback);
    注意:前回のPromiseで結果を得るためには、前回のPromiseで結果を返さなければなりません.を選択します  () => x () => { return x; }よりもっと簡潔です.
    キャッチの後続チェーン操作
    失敗した動作(すなわちcatch)の後にチェーン操作を継続してもよく、チェーンのうちの一つの動作が失敗しても新しい動作が継続的に完了するのに役立ちます.次の例を読んでください.
    new Promise((resolve, reject) => {
        console.log('Initial');
    
        resolve();
    })
    .then(() => {
        throw new Error('Something failed');
            
        console.log('Do this');
    })
    .catch(() => {
        console.log('Do that');
    })
    .then(() => {
        console.log('Do this whatever happened before');
    });
    出力結果は以下の通りです.
    Initial
    Do that
    Do this whatever happened before
    なお、「Something failed」のエラーにより拒否操作が発生したため、「Do this」のテキストは出力されていません.