[聚合文章] 手写一个自己的 JavaScript Promise 类库

开发

终于有时间写这篇文章了, ES2015 推出了JS 的 Promise ，而在没有原生支持的时候，我们也可以使用诸如 Promises/A+ 的库的帮助，在我们的代码里实现Promise 的支持；

如何使用 Promise

在讲具体实现之前我们还是先了解下我们如何使用 Promise 在我们的代码中。

function getData() {  
    return new Promise((resolve, reject)=>{
        request( your_url, (error, res, movieData)=>{
            if (error) reject(error);
            else resolve(movieData);
        });
    });
}
// 使用 getData

getData().then(data => console.log(data))  
.catch(error => console.log(error));

例子我们需要使用 request 模块去请求一个地址，然后拿到响应的数据。由于 request 过程是一个异步的过程。因此我们使用了 promise 来实现。在使用 promsie 的 then 方法拿到 resolve 回来的的数据。

开始基本实现

首先我们定义一个基本的 Promise 类，为了区别于原生的 Promise 我们可以自定义一个 JPromise 类。

function Promise(fn) {  
  var callback = null;
  this.then = function(cb) {
    callback = cb;
  };

  function resolve(value) {
    callback(value);
  }

  fn(resolve);
}

那这样我们实现一个基本的异步过程函数。

function doSomething() {  
  return new Promise(function(resolve) {
    var value = 42;
    resolve(value);
  });
}

但是这样写法有一个问题就是你会发现他在 resolve() 会在 then 之前调用。意味着 callback 会是 null .暂时我们用 setTimeout 来 hack 这个问题。

function Promise(fn) {  
  var callback = null;
  this.then = function(cb) {
    callback = cb;
  };

  function resolve(value) {
    setTimeout(function() {
      callback(value);
    }, 1);
  }

  fn(resolve);
}

再进一步，我们需要 Promise 有状态。

扩展阅读

• Writing Your Own Javascript Promises

• JavaScript Promises ... In Wicked Detail