.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

目次

概要

構造化コールバック

  • Promiseではコールバックを関数に渡すかわりに、
    コールバックを付属させたPromiseオブジェクトをリターンする。
  • これにより、
    • インターフェイス、処理の書き方を統一することができ、
    • 実行と完了に遅延がある処理をうまい具合に扱うことができる。
  • この動作は「デザイン・パターン」から以下のように説明できる。

    「非同期関数は呼び出し元の関数に呼ばれた証を事前に返しておく。
    結果は、非同期処理が終了し次第、その証を持っている関数に通知する。」

詳細

コールバック地獄の解決

  • JavaScriptで非同期処理を順次実行する場合、
    • 同期メソッド上で同期メソッドを順番に呼び出すのではなく、
    • コールバックから再びコールバック付き非同期メソッドを呼び出す必要があるため、

コールバックのネストが深くなりコードが読み難くなるということがある。

  • しかし、Promiseを使用することで、この問題を解決することができる。
    (シーケンシャルではなく、thenのメソッド・チェーンでコールバックを指定する)

Promiseの簡潔な仕組みの解説

Promiseオブジェクト

組み込みクラス。

非同期処理の「実装」方法

以下のようにPromiseオブジェクトを利用して非同期処理を実装する。

  • 非同期処理関数はPromiseオブジェクトを返すように実装する。
  • Promiseオブジェクトは、非同期処理関数の中で以下のように生成される。
  • Promiseオブジェクトのコンストラクタに非同期処理の
    「本体となる非同期処理関数」を(基本的に無名関数として)渡す。
  • この「本体となる非同期処理関数」は、
    • 成功と失敗のコールバックを受け取る。
    • そして、ajaxなどの非同期処理を実行して、
    • 結果を受けて、thenメソッドに渡されたコールバックを実行する。
      成功時:成功のresolveコールバックを実行する。
      失敗時:失敗のrejectコールバックを実行する。
  • resolve, rejectコールバックに値を渡した場合、
    この値は、後続の非同期処理に渡されるため、
    後続の「本体となる非同期処理関数」で利用できる。

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

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

比較

従来型

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

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オブジェクトを返すように実装する。
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);
});

その他の機能

同期処理

  • 同期処理と非同期処理を自然に混ぜて記述することが可能。
  • 同期処理は、Promiseオブジェクト以外が返す。
    この場合、戻り先で新しくPromiseオブジェクトが作成され、
    返した値ですぐにresolve()が呼び出されるため、後続の非同期処理に渡すことができる。

並列処理

以下で、並列処理を実装できる。

エラー処理

チェーンの最後にだけ、

「失敗のPromiseオブジェクトを返す非同期処理関数」

を設定すれば、ココでエラーをまとめてキャッチできる。

参考

MDN

Qiita

HTML5Experts.jp

  • Promiseで簡単!JavaScript非同期処理入門

デザイン・パターン


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2021-04-07 (水) 13:31:12 (78d)