为什么谨慎使用Promise.all?
有一天, 测试跟我反馈说,用户信息页面挂掉了, 整个页面的是空白的(无数据)。
打开浏览器调试了一下,发现只是一个获取用户爱好的接口挂掉了。那么一个接口挂掉了为什么会导致整个页面无数据呢?
先定位一下出问题的代码:
Promise.all([occupations(), hobbies(), vehicles(), user()])
.then(res => {
this.occupationItems = res[0]
this.hobbiesItems = res[1] // 这个数据拿不到
this.vehiclesItems = res[2]
this.user = res[3]
})
.catch(console.error)
这是用户信息页面的代码,用途是请求用户职业,喜好,名下车辆,用户详情等信息。请求回来之后,统一在then里面进行处理。
回忆一下promise.all的用法: 传递一个promise的数组,当所有的promise都完成(resolved),回调所有成功的结果, 或者有一个失败, 回调第一个失败的结果。
在当前状况下, hobbies接口返回500,promise变成rejected状态,然后就不会执行then回调了。
本身使用promise.all的目的是为了简化代码,否则就要拆开写:
hobbies()
.then(hobbiesItems => { this.hobbiesItems = hobbiesItems })
.catch(console.error)
occupations()
.then(occupationItems => { this.occupationItems = occupationItems })
.catch(console.error)
vehicles()
.then(vehicleItems => { this.vehiclesItems = vehicleItems })
.catch(console.error)
user()
.then(currentUser => { this.user = currentUser })
.catch(console.error)
如果有一个回调执行失败,then是不会执行的,或者说,所有的promise也都失败了。这会使得项目的容错大大降低,也许可能只是一个不关键的数据加载失败,其他所有的数据也不会显示。
那怎么办?别急,看看下面的介绍,有两种办法
办法一:为每一个promise设置catch捕获异常状态
办法二:将赋值操作放到每一个promise的异步里面自行处理
下面主要讲办法一
假设有以下代码案例:
const p1 = new Promise((resolve, reject) => {
resolve('hello');
})
.then(result => result);
const p2 = new Promise((resolve, reject) => {
throw new Error('报错了');
})
.then(result => result).catch(e => e);
const p3 = new Promise((resolve, reject) => {
resolve('hello333');
})
.then(result => result).catch(e => e);
Promise.all([p1, p2, p3])
.then(result => console.log('result:', result))
.catch(e => console.log('eee', e));
如果得到的结果无法理解,那么可以继续往下看
Promise对象有以下两个特点。
(1)对象的状态不受外界影响
Promise对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是Promise这个名字的由来,它的英语意思就是“承诺”,表示其他手段无法改变。
(2)一旦状态改变,就不会再变,任何时候都可以得到这个结果
Promise对象的状态改变,只有两种可能:从pending变为fulfilled和从pending变为rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果,这时就称为 resolved(已定型)。如果改变已经发生了,你再对Promise对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。
Promise.all() 方法提供了并行执行异步操作的能力,并且在所有异步操作执行完后才执行回调。
多个 Promise 任务同时执行,如果全部成功执行,则以数组的方式返回所有 Promise 任务的执行结果。 如果有一个 Promise 任务 rejected,则只返回 rejected 任务的结果
。
Promise.all方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。
const p = Promise.all([p1, p2, p3]);
p的状态由p1、p2、p3决定,分成两种情况
(1)只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数。
(2)只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。
// 生成一个Promise对象的数组
const promises = [2, 3, 5, 7, 11, 13].map(function (id) {
return getSourceApi('/post/' + id + ".json");
});
Promise.all(promises).then(function (posts) {
// ...
}).catch(function(reason){
// ...
});
PS:如果作为参数的 Promise 实例,自己定义了catch方法,那么它一旦被rejected,并不会触发Promise.all()的catch方法。
const p1 = new Promise((resolve, reject) => {
resolve('hello');
})
.then(result => result)
.catch(e => e);
const p2 = new Promise((resolve, reject) => {
throw new Error('报错了');
})
.then(result => result)
.catch(e => e);
Promise.all([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
// ["hello", Error: 报错了]
p1会resolved,p2首先会rejected,但是p2有自己的catch方法,该方法返回的是一个新的 Promise 实例,p2指向的实际上是这个实例。
该实例执行完catch方法后,也会变成resolved,导致Promise.all()方法参数里面的两个实例都会resolved,因此会调用then方法指定的回调函数,而不会调用catch方法指定的回调函数。
如果p2没有自己的catch方法,就会调用Promise.all()的catch方法。
const p1 = new Promise((resolve, reject) => {
resolve('hello');
})
.then(result => result);
const p2 = new Promise((resolve, reject) => {
throw new Error('报错了');
})
.then(result => result);
Promise.all([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
// Error: 报错了