最近有个需求,需要通过账号发起两次请求,然后合并展示。账号通过lodash的防抖发起请求,然后用到promise.all的语法,方法实现功能 ---并行执行异步操作的能力。
Promise.all([prepayItems_get(id), postpayItems_get(id)])
.then(([res1, res2]) => {
if (res1.length == 0 && res2.length == 0) {
this.$notification.error({
message: "错误提示",
description: "该用户未开通任何服务",
});
return;
}
/* 包量处理 */
let arr1 = [];
let arr2 = [];
arr1 = res1.map((item) => {
return {
...item.prepay_specs,
...{
specno: item.opiyno,
},
};
});
/* 包周期处理 */
arr2 = res2.map((item) => {
return {
...item.postpay_specs,
...{
specno: item.opihno,
},
};
});
this.serveList = [...arr1, ...arr2];
})
传参形式是以数组的形式里面包裹promise对象,合并用了扩展运算符加 ... 的形式
Promise的概念
异步编程的一种解决方案,可以替代传统的解决方案--回调函数和事件。ES6统一了用法,并原生提供了Promise对象。作为对象,Promise有以下两个特点:
(1)对象的状态不受外界影响。
(2)一旦状态改变了就不会再变,也就是说任何时候Promise都只有一种状态。
它有三个状态:
分别是 Pending (进行中)、Resolved (已完成)、Rejected (已失败)。Promise从Pending状态开始,如果成功就转到成功态,并执行resolve回调函数;如果失败就转到失败状态并执行reject回调函数,注意的是一旦状态开启,就不可能被改变。
Promise常常用在axios的二次封装上面
function ajax(req) {
return new Promise((resolve) => {
Axios.request({
url: req.url,
method: req.method || 'GET',
data: req.data || {},
params: req.params || {},
})
.then((d) => {
resolve(d)
})
.catch((err) => {
resolve(err)
})
})
}
export default ajax
可以看出then 接收成功的回调,catch接收失败的回调。如果参数是 promise 对象,则 promise 对象返回的状态结果就是 Promise.resolve 返回的 promise 对象的状态结果,成功则成功,失败则失败。
还有race用法,这种需求很少遇到,相当于竞速的过程,谁先完成就执行谁
在all中的回调函数中,等到所有的Promise都执行完,再来执行回调函数,race则不同它等到第一个Promise改变状态就开始执行回调函数