,

[JavaScript General] HTML5 Rocks の Promise 記事の抜粋

公開日: 2017/02/11
更新日: 2019/01/11

Promise の記事が読みづらいのでポイントだけ memo.

日本語で読めなくなっている。

JavaScript Promises: There and back again – HTML5 Rocks

こちらにリダイレクト。日本語の原稿。

Contents

Promise と EventListener の違い

EventListener

あるオブジェクトに対して複数回発生する事象（例えばキーアップやタッチ開始）を表現するのに、イベントは向いている。
通常この場合は、リスナーを追加する前に何が起きたか気にする必要はない。

Promise

非同期処理が成功したか失敗したかによって処理を分けたい場合、Promise を利用する。
Promise は基本的にイベントリスナーと似ているが、以下の点で異なる。

  • Promise は一度だけ成功もしくは失敗する。２回成功／失敗したり、成功状態から失敗状態へ変化したりしない。
  • Promise がすでに成功もしくは失敗した後に成功／失敗を通知するコールバックを追加した場合、すでにイベントは完了しているにもかかわらず、正しいコールバックが呼び出される。

jQuery の Deferred を標準の Promise にキャストする方法

JavaScript Promise API では、then メソッドを持つオブジェクトであればなんでも、Promise 風オブジェクト、もとい、Promise 語で言うところの thenable として扱う。
jQuery の Deferred には問題があるが、以下のようにすれば Deferred を標準の Promise にキャストできる。

var jsPromise = Promise.resolve($.ajax('/whatever.json'));

上の例で、jQuery の $.ajax は Deferred を返す。Deferred は “then” メソッドを持っているため、Promise.resolve に渡すことで、JavaScript Promise に変換される。
ただし、Deferred はコールバック関数を呼び出す際、以下のように複数の引数を渡すのに対して、

var jqDeferred = $.ajax('/whatever.json');
jqDeferred.then(function(response, statusText, xhrObj) {
  // ...
}, function(xhrObj, textStatus, err) {
  // ...
});

JavaScript Promise は先頭の引数以外は無視する。

jsPromise.then(function(response) {
  // ...
}, function(xhrObj) {
  // ...
});

だいたいの場合において、先頭の引数しか必要ないので、これで問題ない。
また、jQuery は Error オブジェクトを reject 関数に渡さないことには注意が必要。

XMLHttpRequest の Promise 化

後で何かを例にコードを書いてみる。
書いた。

補遺

もっとよいサマリーがあった。