利用Promise实现数据多个请求加载完成时执行某个方法

Posted 2021-02-02 瑶哥哥可真帅啊！

在实际开发中常常有些业务的数据是来自多个接口的，因为ajax是异步，这样就导致我们需要判断是否请求到了数据然后在做其他的逻辑，在Promise没有出现之前，通常我们的解决方法是，第一粗暴的改异步为同步，但这样会造成阻塞，异步好像又失去了意义，第二也就是大家常用的解决办法用回调既一个异步执行完成后在执行下一个请求，这样看比第一种要好太多了，但是问题又来了，延迟延迟延迟，请求越多最后的那个请求延迟就会越严重，而且这样请求多了之后逻辑就会变得很乱。。。痛苦不堪，还好es6带来的Promise正好能解决这个东西，关于Promise具体详情请百度，这里大致只说三个东西，resolve, reject，Promise.all 对应成功执行，失败执行，返回全部状态，实例贴代码 很容易理解。

const promist = new Promise((resolve, reject) => {
this.$http.jsonp(getRegionNameByIdApi, {params: {regionId: dqarr}}).then((res) => {
this.dqarr = res.body.data
resolve(res.body.data)
}, (err) => {
console.log(err)
})
})
const promist1 = new Promise((resolve, reject) => {
this.$http.jsonp(getPartnerNameByIdApi, {params: {partnerId: sharr}}).then((res) => {
this.sharr = res.body.data
resolve(res.body.data)
}, (err) => {
console.log(err)
})
})
Promise.all([promist, promist1]).then((resultList) => {
console.log(‘results:‘, resultList)
resultList[0].map((item) => {
this.tableData.map((val) => {
if (item.regionId === val.regionId) {
val.region_name = item.regionName
}
if (item.regionId === val.areaId) {
val.area_name = item.regionName
}
if (item.regionId === val.shopId) {
val.shopName = item.regionName
}
if (resultList[1][val.partnerId]) {
val.partner_name = resultList[1][val.partnerId]
}
})
})
this.$set(this.tableData, this.tableData)
})
创建promis和promist1并赋值一个Promise返回结果，在new一个新的Promise中 resolve代表成功要执行的方法，传入异步响应的数据，这个新的Promise最后将返回一个数组 最后Promise.all传入两个参数，注意Promise.all只能传入一个数组，在数组中放promis和promis1，在then中同样返回一个数组，对应promis和promis1成功响应的数据
---------------------
作者：wzzehui
来源：CSDN
原文：https://blog.csdn.net/wzzehui/article/details/81179921
版权声明：本文为博主原创文章，转载请附上博文链接！