Promise (JavaScript) のバックアップ(No.5)

この「本体となる非同期処理関数」は、
- 成功と失敗のコールバックを受け取る。
- そして、ajaxなどの非同期処理を実行して、
- 結果を受けて、thenメソッドに渡されたコールバックを実行する。
  成功時：成功のresolveコールバックを実行する。
  失敗時：失敗のrejectコールバックを実行する。

resolve, rejectコールバックに値を渡した場合、
この値は、後続の非同期処理に渡されるため、
後続の「本体となる非同期処理関数」で利用できる。

↑

非同期処理の「実行」方法 †

最初の非同期処理を呼び出す。

戻り値のPromiseオブジェクトのthenメソッドに引数に、
- 成功と失敗のコールバックを指定する。
- 更にthenメソッドでチェーンする場合、
  成功と失敗のPromiseオブジェクトを返す非同期処理関数を指定する。

参考
- Promise.prototype.then() - JavaScript | MDN
  https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/then

↑

比較 †

↑

従来型 †

従来型では、非同期処理を順次実行する場合、
非同期処理に非同期処理（コールバック）を渡すため、
以下の様に非同期処理がネストすることになる。

fetchSomething1(function() {
  fetchSomething2(function() {
    fetchSomething3(function() {
      fetchSomething4(doSomethingFinally);
    });
  });
});

※ resolveをrejectに書き換えると動作を変更させることができる。

↑

Promise型 †

↑

メリット †

Promiseを使用すれば、
- thenや
- catch（例外をcatchし以降のrejectを止める）の

メソッド・チェーンで非同期処理を順次実行できる。

↑

例 †

順次実行

var promise1 = fetchSomething1();
var promise2 = promise1.then(fetchSomething2);
var promise3 = promise2.then(fetchSomething3);
var promise4 = promise2.then(fetchSomething4);
promise4.then(doSomethingFinally);

メソッド・チェーン

fetchSomething1()
  .then(fetchSomething2)
  .then(fetchSomething3)
  .then(fetchSomething4)
  .then(doSomethingFinally);

※ 各非同期処理（fetchSomething、doSomething）は、
　Promiseオブジェクトを返すように実装されている。

※ 各非同期処理に「値を渡したり」・「処理を追加したり」する場合は以下のようにする。
.then(
  function(rtn) {
    alert(rtn);
    return fetchSomething2(rtn);
}).then(...

参考
- Promise.prototype.catch() - JavaScript | MDN
  https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch

↑

サンプル・コード †

↑

ダミー非同期関数を使用したサンプル・コード †

// 非同期処理関数はPromiseオブジェクトを返すように実装する。
var fetchSomething1 = function() {

  // Promiseオブジェクトは、非同期処理関数の中で以下のように生成される。
  return new Promise(

    // Promiseオブジェクトのコンストラクタに非同期処理の
    // 「本体となる非同期処理関数」を（基本的に無名関数として）渡す。
    // この「本体となる非同期処理関数」は、成功と失敗のコールバックを受け取る。
    function(resolve, reject) {

      // そして、ajaxなどの非同期処理を実行して、
      // 結果を受けて、thenメソッドに渡されたコールバックを実行する。
      AsynchronousProcessingWrapper({
        success: function(data) { // 成功した場合
          // 成功のコールバックを実行する。
          resolve('成功1');
        },
        fail: function() { // 失敗した場合
          // 失敗のコールバックを実行する。
          reject('失敗1');
        }
      });
    }

    // resolve, rejectコールバックに値を渡した場合、
    // この値は、後続の非同期処理に渡されるため、
    // 後続の「本体となる非同期処理関数」で利用できる。
  );
};

// fetchSomething1 と同じ。
var fetchSomething2 = function(str) {

  return new Promise(function(resolve, reject) {
    AsynchronousProcessingWrapper({
      success: function(data) { // 成功した場合
        resolve(str + ' 成功2');
      },
      fail: function() { // 失敗した場合
        reject(str + ' 失敗2');
      }
    });
  });
};

fetchSomething1().then(function(rtn) {
  alert(rtn);
  return fetchSomething2(rtn);
}, function(error) {
  alert('error:' + error);
  return fetchSomething2(error);
}).then(function(rtn) {
  alert(rtn);
}, function(error) {
  alert('error:' + error);
});

↑

developer.mozilla.orgで実行可能にしたサンプル・コード †

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

※ ダミー非同期関数を削除した。
※ resolveをrejectに切り替えると動作を変更させることができる。

var fetchSomething1 = function() {
  return new Promise(function(resolve, reject) {
        resolve('成功1');
        //reject('失敗1');
  });
};

var fetchSomething2 = function(str) {
  return new Promise(function(resolve, reject) {
        resolve(str + ' 成功2');
        //reject(str + ' 失敗2');
  });
};

fetchSomething1().then(function(rtn) {
  alert(rtn);
  return fetchSomething2(rtn);
}, function(error) {
  alert('error:' + error);
  return fetchSomething2(error);
}).then(function(rtn) {
  alert(rtn);
}, function(error) {
  alert('error:' + error);
});

↑