Promise (JavaScript) のバックアップ(No.3) - .NET 開発基盤部会 Wiki

[ トップ ] [ 新規 | 一覧 | 単語検索 | 最終更新 | ヘルプ ]

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
Promise (JavaScript) へ行く。
- 1 (2018-02-23 (金) 14:29:55)
- 2 (2018-02-23 (金) 17:27:47)
- 3 (2018-02-23 (金) 19:26:28)
- 4 (2018-02-28 (水) 13:12:58)
- 5 (2018-02-28 (水) 18:33:01)
- 6 (2018-03-05 (月) 14:47:35)
- 7 (2021-04-05 (月) 18:57:56)

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

戻る

目次 †

目次
概要
詳細
- コールバック地獄の解決
- Promiseの簡潔な仕組みの解説
比較
- 従来型
- Promise型
その他の機能
参考

概要 †

Promiseではコールバックを関数に渡すかわりに、
コールバックを付属させたPromiseオブジェクトをリターンする。

これにより、
- インターフェイス、処理の書き方を統一することができ、
- 実行と完了に遅延がある処理をうまい具合に扱うことができる。

詳細 †

コールバック地獄の解決 †

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

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

しかし、Promiseを使用することで、この問題を解決することができる。
（シーケンシャルではないがメソッド・チェーンで順番に呼び出すことができる）

Promiseの簡潔な仕組みの解説 †

Promiseオブジェクト †

組み込みクラス。

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

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

非同期処理関数はPromiseオブジェクトを返すように実装する。

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

Promiseオブジェクトのコンストラクタに非同期処理の
「本体となる非同期処理関数」を（基本的に無名関数として）渡す。

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

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

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

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

戻り値の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);
    });
  });
});

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);

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

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

その他の機能 †

同期処理 †

同期処理と非同期処理を自然に混ぜて記述することが可能。

同期処理は、Promiseオブジェクト以外が返す。
この場合、戻り先で新しくPromiseオブジェクトが作成され、
返した値ですぐにresolveされるため、後続の非同期処理に渡すことができる。

並列処理 †

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

Promise.all() - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

エラー処理 †

チェーンの最後にだけ、

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

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

参考 †

Promiseでコールバック地獄から解放された話
https://www.slideshare.net/sotasugiura/slide-43304678

MDN †

JavaScript

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

Using promises
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Using_promises

Qiita †

今更だけどPromise入門
https://qiita.com/koki_cheese/items/c559da338a3d307c9d88

Promiseについて0から勉強してみた
https://qiita.com/toshihirock/items/e49b66f8685a8510bd76

Promise再入門

① ~Promise基本編~
https://qiita.com/gctfuji/items/1dfe4265c36bea903ab3

② ~async/await編~
https://qiita.com/gctfuji/items/47d310ae795aa9131c14

jQuery Deferredまとめ
https://qiita.com/hththt/items/9f193fc10b79cdeea903

HTML5Experts.jp †

連載 | ECMAScript 2015（ECMAScript 6）特集
https://html5experts.jp/series/ecma2015/

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

【前編】
https://html5experts.jp/takazudo/17107/

【後編】
https://html5experts.jp/takazudo/17113/