简单学习 Promise 对象
引言 Promise 是异步编程的一种解决方案,比传统的解决方案——回调和事件——更合理且强大。最近的项目要用到这个,就参照阮一峰老师的《ES6标准入门》这本书简单学一下了。
1 Promise 的含义
所谓 Promise ,简单来说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上来看,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。
Promise 对象有以下两个特点。
- 对象的状态不受外界影响。
- 一旦状态改变就不会再变。
2 基本用法
ES6 规定,Promise 对象是一个构造函数,用来生成 Promise 实例。
举个例子。
var promise = new Promise(function (resolve, reject) { // some code if (/* 异步操作成功*/) { resolve(value); } else { // 异步操作失败 reject(error); } });
Promise 构造函数接收一个函数
作为参数,该函数
的两个参数分别是 resolve
和 reject
。他们是两个函数,由 Javascript 引擎提供,不用自己部署。
resolve
函数的作用是将 Promise
对象的状态从『未完成』(Pending)变为『成功』(Resolved),在异步操作成功的时候调用,并将异步操作的结果作为参数传递过去。 reject
函数的作用是,将 Promise
对象的状态从『未完成』(Pending)变为『失败』(Rejected)
当我们生成了一个 Promise 实例之后。就可以用 then
方法分别指定 Resolved
状态和 Rejected
状态的回调函数。
promise.then(function (value) { // success console.log(value); }, function (error) { // failed console.log(error); });
then
方法可以接受两个回调函数作为参数。第一个回调函数是 Promise
对象的状态变为 Resolved
时调用,第二个回调函数是 Promise
对象的状态变为 Rejected
时调用。其中第二个参数是可选的,不一定要提供。这两个函数都接收 Promise
对象传出的值作为参数。
我们来个小例子
let promise = new Promise(function(resolve,reject){ console.log('Promise'); let value = 'value'; resolve(value); }); promise.then(function(value){ console.log(value); }); console.log('Hi'); // Promise // Hi // value
上面的代码中,Promise 新建后会立即执行,所以首先输出的是 Promise
。然后,then
方法指定的回调函数将当前脚本所有同步任务执行完成后才会执行,所以 Resolved
最后输出。
3 Promise.prototype.then()
Promise 实例具有 then
方法,即 then
方法是定义在原型对象 Promise.prototype
上的。它的作用是为 Promise 实例添加改变状态时的回调函数。前面说过,then
方法的第一个参数是 Resolved
状态的回调函数,第二个参数(可选)是 Rejected
状态的回调函数。
then
方法返回的是一个新的 Promise 实例
(注意
不是原来的那个 Promise 实例)。因此可以采用链式写法,即 then
方法后面再调用另一个 then
方法。
getJSON("/posts.json").then(function(json) { return json.post; }).then(function(post) { // ... });
上面的代码使用 then
方法依次指定了两个回调函数。第一个回调函数完成以后,将会返回结果作为参数,传入第二个回调函数。
然后采用链式的 then
可以指定一组按顺序调用的回调函数。这时,前一个回调函数有可能返回的还是一个 Promise 对象(即有异步操作),而后一个回调函数就会等待该 Promise 对象的状态发生变化,再被调用。
4 Promise.prototype.catch()
Promise.prototype.catch
方法是 .then(null, rejection)
的别名,用于指定发生错误时的回调函数。
getJSON('/posts.json').then(function(posts) { // ... }).catch(function(error) { // 处理 getJSON 和 前一个回调函数运行时发生的错误 console.log('发生错误!', error); });
上面的代码中,getJSON
方法返回一个 Promise 对象,如果该对象状态变为 Resolved
,则会调用 then
方法指定的回调函数;如果异步操作抛出错误,状态就会变成 Rejected
,然后调用 catch
方法指定的回调函数处理这个错误。另外, then
方法指定的回调函数如果在运行中抛出错误,也会被 catch
方法捕获。
p.then((val) => console.log('fulfilled:', val)) .catch((err) => console.log('rejected', err)); // 等同于 p.then((val) => console.log('fulfilled:', val)) .then(null, (err) => console.log("rejected:", err));
下面是一个例子。
const promise = new Promise(function(resolve, reject) { throw new Error('test'); }); promise.catch(function(error) { console.log(error); }); // Error: test
上面的代码中,Promise 抛出一个错误就被 catch
方法指定的回调函数所捕获。注意,上面的写法和下面两种写法是等价的。
// 写法一 const promise = new Promise(function(resolve, reject) { try { throw new Error('test'); } catch(e) { reject(e); } }); promise.catch(function(error) { console.log(error); }); // 写法二 const promise = new Promise(function(resolve, reject) { reject(new Error('test')); }); promise.catch(function(error) { console.log(error); });
由上面可以看出, reject
方法的作用等同于抛出错误。
如果 Promise
状态已经变成 Resolved,在抛出错误是无效的。
const promise = new Promise(function(resolve, reject) { resolve('ok'); // Promise 状态已变成 已完成 throw new Error('test'); }); promise .then(function(value) { console.log(value) }) .catch(function(error) { console.log(error) }); // ok
注意 一般来说,不要在 then
方法中定义 reject
状态的回调函数(即 then
的第二个参数),而是使用 catch
方法。
// bad promise .then(function(data) { // success }, function(err) { // error }); // good promise .then(function(data) { //cb // success }) .catch(function(err) { // error });
上面代码中,第二种写法要好于第一种写法,理由是第二种写法可以捕获前面 then
方法执行中的错误,也更接近同步的写法(try/catch)。因此,建议总是使用 catch
方法,而不使用 then
方法的第二个参数。
5 Promise.all()
Promise.all
方法是将多个 Promise 对象实例包装成一个新的实例。
var p = Promise.all([p1, p2, p3]);
上面的代码中,Promise.all()
方法接受一个数组作为参数,p1, p2, p3 都是 Promise 对象的实例。如果不是,就会先调用下面讲到的 Promise.resolve
方法,将参数转换为 Promise 实例,再进一步处理(Promise.all
方法的参数不一定是数组,但是必须具有 Iterator
接口,且每个返回成员都是 Promise 实例)。
p 的状态由 p1, p2, p3 决定,分成两种情况
- 只有 p1, p2, p3 的状态都变成 FulFilled,p 的状态才会变成 FulFilled,此时 p1, p2, p3 的返回值组成一个数组,传递给 p 的回调函数。
- 只要 p1,p2,p3 中有一个被 Rejected ,p 的状态就直接变成 Rejected,此时第一个被 Rejected 的实例的返回值会传递给 p 的回调函数。
下面是一个具体例子。
var promises = [2,3,4,5].map(function(id){ console.log(id) }); Promise.all(promises).then(function(res){ console.log(res); resolve }).catch(function(error){ console.log(error); }); // 先执行所有 promise 实例的异步操作,然后吧操作的结果打包数组返回 // 2 3 4 5 [undefined,undefined,undefined,undefined]
上面的代码中,Promise 是包含 6 个 Promise 实例的数组,只有这 6 个实例的状态都变成 fulfilled,或者其中有 1 个变成 rejected,才会调用 Promise.all
方法后面的回调函数。
6 Promise.race()
Promise.race
方法同样是将多个 Promise 实例包装成一个新的 Promise 实例。
var p = Promise.race([p1, p2, p])
上面的代码中,只要 p1, p2, p3 中 有一个实例
率先改变状态,p 的状态就跟着改变。那个率先改变的 Promise 实例的返回值就传递给 p 的回调函数。Promise.race
方法的参数与 Promise.all
方法一样,如果不是 Promise 实例,就会先调用下面讲到的 Promise.resolve
方法,将参数转为 Promise 实例,再进一步处理。
下面是一个例子,如果指定时间内没有获得结果,就将 Promise 的状态变成 Rejected,否则就变为 Resolved。
const p = Promise.race([ fetch('/resource-that-may-take-a-while'), new Promise(function (resolve, reject) { setTimeout(() => reject(new Error('request timeout')), 5000) }) ]); p .then(console.log) .catch(console.error);
上面代码中,如果 5 秒之内 fetch
方法无法返回结果,变量 p 的状态就会变为 rejected,从而触发 catch
方法指定的回调函数。
7 Promise.resolve()
有时需要将现有对象转为 Promise 对象,Promise.resolve
方法就起到这个作用。
const jsPromise = Promise.resolve($.ajax('/whatever.json'));
上面代码将 jQuery 生成的 deferred 对象,转为一个新的 Promise 对象。
Promise.resolve
等价于下面的写法。
Promise.resolve('foo') // 等价于 new Promise(resolve => resolve('foo'))
Promise.resolve方法的参数分成四种情况。
7.1 参数是一个 Promise 实例
如果参数是一个 Promise 实例,那么 Promise.resolve
将不做任何修改,原封不动的返回这个实例。
7.2 参数是一个 thenable 对象
thenable 对象是指具有 then 方法的对象,例如下面这个对象
let thenable = { then: function(resolve, reject) { resolve(42); } };
Promise.resolve
方法会将这个对象转为 Promise 对象,任何执行 thenable 对象的 then 方法。
let thenable = { then: function(resolve, reject) { resolve(42); } }; let p1 = Promise.resolve(thenable); p1.then(function(value) { console.log(value); // 42 });
上面的代码中, thenable 对象的 then 方法执行后,对象 p1 的状态就变为 resolved,从而立即执行最后的 then 方法指定的回调函数。输出 42。
7.3 参数不是具有 then 方法的对象,或根本就不是对象
如果参数是一个原始值,或者是一个不具有 then 方法的对象,那么 Promise.resolved
方法返回一个新的 Promise 对象,状态为 Resolved。
const p = Promise.resolve('Hello'); p.then(function (s){ console.log(s) }); // Hello
上面代码生成一个新的 Promise 对象的实例 p。由于字符串 Hello 不属于异步操作(判断方法是字符串对象不具有 then 方法),返回 Promise 实例的状态从一生成就是 resolved,所以回调函数会立即执行。Promise.resolve
方法的参数,会同时传给回调函数。
7.4 不带有任何参数
Promise.resolved
方法允许在调用时不带有参数,而直接返回一个 Resolved 状态的 Promise 对象。
所以,如果你希望得到一个 Promise 对象,比较方便的方法就是直接调用 Promise.resolve
方法。
const p = Promise.resolve(); p.then(function () { // ... });
上面代码中的 p 就是一个 Promise 对象。
需要注意的是,立即 resolve 的 Promise 对象实在本轮 『事件循环』(event loop)结束时,而不是在下一轮『事件循环』开始时。
setTimeout(function () { console.log('three'); }, 0); Promise.resolve().then(function () { console.log('two'); }); console.log('one'); // one // two // three
上面代码中,setTimeout(fn, 0)
在下一轮『事件循环』开始时执行,Promise.resolve()
在本轮『事件循环』结束时执行,console.log('one')
则是立即执行,因此最先输出。
8 Promise.reject()
Promise.reject(resson)
方法也会返回一个新的 Promise 实例,状态为 Rejected (这个就暂时想不懂怎么应用了)。
const p = Promise.reject('出错了'); // 等同于 const p = new Promise((resolve, reject) => reject('出错了')) p.then(null, function (s) { console.log(s) }); // 出错了
上面的代码生成一个 Promise 对象的实例 p,状态为 Rejected,回调函数会立即执行。
总结
以上就是关于 Promise 学习的内容,如有错误的地方就请在下面评论处,发表一下看法,当然也可以放一下关于进阶学习 Promise 的文章,大家一起学习。