参考资料
本文只记录 Promise 最基本内容, 如果想详细深入了解, 请移步下面两个链接
JavaScript Promise 迷你书
JavaScript Promise: 简介
兼容性
promise 兼容性
一 Promise 的状态
Promise 有 3 种状态:
Pending: 进行中
Resolved(Fulfilled): 已完成
Rejected: 已失败
Promise 状态的改变只有两种:
- Pending --> Resolved
- Pending --> Rejected
这意味着, 一个 Promise 对象 resolve 之后, 状态就一直停留在 Resolved 那里了, 反过来 reject 也一样
这种特点的结果是, Promise 对象的状态改变之后, 你再给它添加回调函数, 这个函数也会执行
这跟事件监听器很不一样 你一旦错过某个事件, 就没办法再捕获他了, 除非这个事件再次发生
二 .then() 和 .catch()
Promise 构造器接受一个函数作为参数, 这个函数有两个参数: resolve,reject, 分别代表这个 Promise 实例成功之后的回调函数和失败之后的回调函数
举个例子:
- var promise = new Promise(function(resolve, reject) {
- var a = 1
- if (a == 1) {
- resolve(a)
- } else {
- reject(error)
- }
- }) promise.then(function(value) {
- console.log(value);
- }).
- catch(function(error) {
- console.log(error);
- })
- // 输出:
- // 1
不管是 then 方法还是 catch 方法返回的都是一个新的 Promise 实例, 这意味着 Promise 可以链式调用 then 和 catch, 每一个方法的返回值作为下一个方法的参数:
- var promise = new Promise(function (resolve, reject) {
- var a = 1
- if (a === 1) {
- resolve(a)
- } else {
- reject(error)
- }
- })
- promise.then(function (value) {
- console.log(value++)
- return value
- }).catch(function (error) {
- console.log(error)
- }).then(function (value) {
- console.log(value++)
- })
- // 输出:
- // 1
- // 2
如果其中一个 then 失败了, 它后面第一个 catch 方法就会接受这个错误并执行, 然后继续执行后面的方法, 比如:
- var promise = new Promise(function(resolve, reject) {
- resolve()
- }) promise.then(function(value) { // 抛出错误
- console.log(1 / x)
- }).then(function() { // 此方法不会执行
- console.log('This"then"method will not happend!')
- }).
- catch(function(error) { // 接受错误, 并打印出错误
- console.log('Have an error:', error)
- }).then(function() { // 此方法会执行
- console.log('This"then"method will happend!')
- })
- // 输出:
- /*
- Have an error: ReferenceError: x is not defined
- at /Users/linxueying/Library/Mobile
- ......
- This "then" method will happend!
- */
三 Promise.resolve() 和 Promise.reject()
两者都是是 new promise() 的快捷方式
Promise.resolve(value) 是下面代码的语法糖:
- new Promise(function (resolve) {
- resolve(value)
- })
所以
- Promise.resolve(42).then(function(value){
- console.log(value);
- });
- // 等同于
- var promise = new Promise(function (resolve) {
- resolve(42)
- })
- promise.then(function (value) {
- console.log(value)
- })
Promise.reject(value) 是下面代码的语法糖:
- new Promise(function(resolve,reject){
- reject(new Error("出错了"));
- });
四 Promise.all 和 Promise.race
1. Promise.all()
接收一个 Promise 对象的数组作为参数, 当这个数组里的所有 Promise 对象全部变为 resolve 的时候, 该方法才 resolve
如果其中一个 Promise 对象为 reject 的话, 则该方法为 reject
比如:
- // `delay` 毫秒后执行 resolve
- function timerPromisefy(delay) {
- return new Promise(function (resolve) {
- setTimeout(function () {
- resolve(delay);
- }, delay);
- });
- }
- // 当数组中所有 Promise 对象被 resolve 之后, 该方法才返回
- Promise.all([
- timerPromisefy(1),
- timerPromisefy(32),
- timerPromisefy(64),
- timerPromisefy(128)
- ]).then(function (value) {
- console.log(value);
- });
- // 输出: [ 1, 32, 64, 128 ]
- 2. Promise.race()
使用方法和 Promise.all 一样, 接收一个 Promise 对象数组为参数
只要其中一个 Promise 对象变为 Resolved 或者 Rejected 状态, 该方法返回, 进行后面的处理
看例子:
- // `delay` 毫秒后执行 resolve
- function timerPromisefy(delay) {
- return new Promise(function (resolve) {
- setTimeout(function () {
- resolve(delay);
- }, delay);
- });
- }
- // 任何一个 promise 变为 resolve 或 reject 的话程序就停止运行
- Promise.race([
- timerPromisefy(1),
- timerPromisefy(32),
- timerPromisefy(64),
- timerPromisefy(128)
- ]).then(function (value) {
- console.log(value);
- });
- // 输出: 1
五 用 Promise 封装 AJAX 代码
原生的 AJAX 代码真的是又臭又长了, 可以用 Promise 把它们封装起来, 每次使用只需要调用一下封装好的函数就可以了:
- function get(url) {
- // 返回一个 Promise 对象
- return new Promise(function (resolve, reject) {
- // 创建一个 XHR 对象
- var req = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTTP')
- req.open('GET', url, true)
- // 使用 req.onload 监听 req 的状态
- req.onload = function () {
- if (req.readyState == 4 && req.status == 200) {
- resolve(req.response)
- } else {
- reject(Error(req.statusText))
- }
- }
- // 网络错误
- req.onerror = function () {
- reject(Error("Network Error"));
- };
- // 发送请求
- req.send();
- });
- }
- get("http://something").then(function (response) {
- console.log(response);
- }).catch(function (error) {
- console.log(error);
- })
之后想要使用 AJAX, 只需要一个简单的 get() 函数就可以搞定啦!
有一个地方需要注意的是, 在 get() 函数里面调用了 req.onload, 之前为什么这里不使用
req.onreadystatechange
呢?
上面已经说过, Promise 的状态的改变是单向的, 一次性的, 一旦改变, 状态就会凝固了, 而我们代码中判断状态的片段是这样的:
- if (req.readyState == 4 && req.status == 200) {
- resolve(req.response)
- } else {
- reject(Error(req.statusText))
- }
我们在 if...else 语句中改变了 Promise 的状态, 也就是
req.onreadystatechange
只会被调用一次那么如果用
req.onreadystatechange
的话, 会出现什么结果呢?
我们永远只能得到 error~因为 req 的 state 一旦改变,
req.onreadystatechange
就会被调用, 所以我们永远只能捕捉到 req 的 state 为 2 的时候!
不得不说 Promise 真的很有趣!
来源: http://www.jianshu.com/p/82237a7ca6e5