Promise的前世今生

最新推荐文章于 2024-12-02 17:34:08 发布

weixin_40674835

最新推荐文章于 2024-12-02 17:34:08 发布

阅读量232

点赞数

文章标签： JavaScript

点击有惊喜

Promise 的历史

Promise 是一个古老的概念（最初提出于 1976 年），通常与 future 结合在一起。Future 指的是未来的值，通常在 Promise 里被作为参数和返回值传来传去（但是在有的语境下 Future 又被用来指代类似 Promise 的东西。下文中，我们所说的 future 表示第一种概念）。

Promise 只是一个概念，很多常见语言的标准库都有 Promise 关联的特性（比如 C++ 11 的 std::promise 和 std::future、Java 8 的 java.util.concurrent.Future、Python 3.2+ 的 concurrent.futures等）。即使标准库里没有，大部分语言里也有第三方实现的 Promise（比如 Ruby 的 Promise gem）。这里主要讨论 JavaScript，特别是 ECMAScript 2015 中的 Promise。

在 JavaScript 的世界里，最早得到广泛使用的 Promise 是 jQuery 的 AJAX 模块中出现的 jQuery.Deferred()。Promise/A+ 标准规定了一系列 API，并配有大量的测试用例，ECMAScript 2015 直接整合了这个标准。

Promise/A+ 提供的 API 非常有限，很多 Promise 库（Q、bluebird 等）在兼容 Promise/A+ 的基础上添加了一些其他的扩展。jQuery 3.0 也已经将 Deferred 迁移成了与 Promise/A+ 兼容。

Promise 的三种状态

依照 Promise/A+ 的定义，Promise 有三种状态：

pending: 初始状态，表示既不是 fullfilled，也不是 rejected
fulfilled: 表示操作完成
rejected: 表示操作失败

另外， fulfilled 与 rejected 一起合称 settled。

Promise 的构造函数

构造一个 Promise，最基本的用法如下：

var promise = new Promise(function(resolve, reject) {
    if (...) {  // succeed
        resolve(result);
    } else {   // fails
        reject(Error(errMessage));
    }
});

实例：将 `XMLHttpRequest` Promise 化

var ajax = (function() {
  'use strict';
  var DONE = 4,
      OK = 200;

  function serialize(obj) {
     var str = [];
     for(var p in obj) {
         if (obj.hasOwnProperty(p)) {
             str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
         }
     }
     return str.join("&");
  }

  function core(method, url, data, headers) {
    if (method === 'GET' && data) {
      url += '?' + serialize(data);
    }

    // Establishing a promise in return
    return new Promise(function(resolve, reject) {
      // Instantiates the XMLHttpRequest
      var xhr = new XMLHttpRequest();
      xhr.open(method, url, true);

      if (headers) {
        for (var key in headers) {
          if (headers.hasOwnProperty(key)) {
            xhr.setRequestHeader(key, headers[key])
          }
        }
      }

      xhr.onreadystatechange = function(e) {
        if (xhr.readyState === DONE) {
          if (xhr.status === OK) {  // pass to then arg1
            resolve(xhr.responseText);
          } else {  // pass to catch/then arg2
            reject(Error(xhr.statusText));
          }
        }
      };

      xhr.onerror = function(e) {
        reject(Error("XMLHttpRequest failed"));
      }

      if (method === 'GET' || !data) {
        xhr.send();
      } else {
        xhr.send(data);
      }
    });
  }

  return {
    'get': function(url, data, headers) {
      return core('GET', url, data, headers);
    },
    'post': function(url, data, headers) {
      return core('POST', url, data, headers);
    },
    'put': function(url, data, headers) {
      return core('PUT', url, data, headers);
    },
    'delete': function(url, headers) {
      return core('DELETE', url, headers);
    }
  };
}());

Instance method

Promise 实例拥有 then 方法（具有 then 方法的对象，通常被称为 thenable）。它的使用方法如下：

`promise.then(onFulfilled, onRejected)`

接收两个函数作为参数，一个在 fulfilled 的时候被调用，一个在 rejected 的时候被调用，接收参数就是 future，onFulfilled 对应 resolve, onRejected 对应 reject。

var promise = new Promise(function(resolve, reject) {
    if (someCondition) {  // succeed
        resolve(1);
    } else {   // fails
        reject("err");
    }
});

promise.then(function(future) {
    console.log(future);  // log 1 if someCondition = true
    return 2;
}, function(err) {
    console.log(err);  // log err if someCondition = false
}).then(function(future) {
    console.log(future);  // log 2 if someCondition = true
});

如果 Promise 被 reject，后面的 then 又没有指定 onRejected，会往后面的 then 的 onRejected 传递 future。

var promise = new Promise(function(resolve, reject) {
    reject("err");
});

promise.then(function(future) {
    console.log(future);   // won't get in here
    return 2;
}).then(function(future) {
    console.log(future);   // won't get in here
}, function(err) {
    console.log(err + " catched in 2nd then"); // log: err catched in 2nd then
});

如果 Promise 被 onRejected 处理，那么 onRejected 的返回值（future）会传给下一个 then 的 onFulfilled。

var promise = new Promise(function(resolve, reject) {
    reject("err");
});

promise.then(function(future) {
    console.log(future);
    return 2;
}, function(err) {
    console.log(err);  // log: err
    return "return value in first onRejected"
}).then(function(future) {
    console.log(future); // log: return value in first onRejected
});

如果返回了一个 Promise，在后面的 then 的参数里会被拆开，所以得到的还是 future。这个特性与函数式编程中的 Monad) 有异曲同工之妙：

var promise = new Promise(function(resolve, reject) {
    resolve(1);
});

promise.then(function(future) {
    console.log(future);  // log: 1
    return new Promise(function(resolve, reject) {
        resolve("future in the first then");
    });
}).then(function(future) {
    console.log(future);  // log: future in the first then
});

`promise.catch(onRejected)`

promise.catch(onRejected) 等于 promise.then(undefined, onRejected)。未实现 ES5 的环境下（e.g. IE8） catch 作为对象的属性时依然属于保留字，会报错，可以用 promise["catch"] 绕过。

使用之前的例子

var p = ajax
  .get('http://foo.com/api/normal/123', {id: 1234})
  .then(function(response) {
    console.log(response);
    var data = JSON.parse(response);
    return ajax.post('http://foo.com/api/normal',
        JSON.stringify({id: data.content}),
        { "Content-Type": "application/json" });
  }).then(function(response) {
    console.log(response);
  }).catch(function(err) {
    console.log(err);
  });

Static method

`Promise.all(iterable)`

参数中所有的 Promise resolve 后，then 里包含这些 Promise 的 future。

Promise.all([promise1, promise2, promise3]).then(function(futures) {
    console.log(futures); // [future1, future2, future]
});

`Promise.race(iterable)`

参数中任一 Promise resolve 后，then 里包含最快 resolve 的那个 Promise 的结果。

Promise.race([promise1, promise2, promise3]).then(function(future) {
    console.log(future); // future1 if promise1 is resolved first, etc.
});

`Promise.resolve(...)`

快速创建一个 Promise，如果参数原来是 Promise，返回值跟原来的 Promise 一致，如果原来不是 Promise，参数值会被包装给 then 的第一个参数函数，所以可以用来封装不确定是不是 Promise 的值。

Promise.resolve(1);

// is equivalent to
new Promise(function(resolve, reject) {
    resolve(1);
})

Promise.resolve(1).then(function(future) {
    console.log(future);  // 1
});

Promise.resolve(promise).then(function(future) {
    console.log(future);
});

// is equivalent to
promise.then(function(future) {
    console.log(future);
});

`Promise.reject(...)`

快速创建一个被 reject 的 Promise，如果参数原来是 Promise，返回值跟原来的 Promise 一致，如果原来不是 Promise，参数值会被包装给 then 的第二个参数函数或者 catch，所以可以用来封装不确定是不是 Promise 的值。

Promise.reject("err");

// is equivalent to
new Promise(function(resolve, reject) {
    reject("err");
})

Promise.reject(1).catch(function(future) {
    console.log(future);  // 1
});

Promise.resolve(promise).catch(function(future) {
    console.log(future);
});

// is equivalent to
promise.catch(function(future) {
    console.log(future);
});

点击有惊喜