ES6 Promiseのメモ

非同期処理のスマートな書き方の1つの解として注目を集めているPromise。

Deferredとか呼ばれたり、実装によってメソッド名とか仕組みとかが微妙に違ったり、しょうがないことですが言語仕様次第で実装方法が変わったりと、今ひとつ安定しないデザパタですが、コアコンセプトはES6のPromiseで抑えておくのが良いんじゃないかなと思います。

// 普通の実装
function incrementAsyncCallback(n, callback) {
  setTimeout(function() {
    callback(n+1);
  }, 100);
}

// thenメソッドを持つ(=thenable)オブジェクトを返す実装。
function incrementAsyncThenable(n) {
  var then;
  setTimeout(function() {
    if (then) then(n+1);
  }, 100);
  return {
    then: function(callback) {
      then = callback;
    }
  };
}

// ES6 Promiseを利用した実装
function incrementAsyncPromise(n) {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve(n+1);
    });
  });
}

// 上述の非同期関数をPromiseで逐次的に実行する例
Promise.resolve(1)
.then(function(n) {
  // Promiseでラップしてあげればthenで繋げられる
  return new Promise(function(resolve, reject) {
    incrementAsyncCallback(n, function(n) {
      resolve(n);
    });
  });
})
.then(function(n) {
  // thenableなオブジェクトを返す場合はPromise.resolve
  return Promise.resolve(incrementAsyncThenable(n));
})
.then(incrementAsyncPromise) // Promise返すなら何もする必要ない
.then(function(n) {
  console.log(n); // => 4
});
広告を非表示にする