如何使用Promise来同时请求多个数据
2020-09-07 本文已影响0人
PingerL
需求:多个请求,不管成功或失败,都希望拿到这些请求的结果,比如,第一个请求失败了,后面的请求还是继续,请问怎么实现?
- 初版
- 将所有的异步请求的结果放入一个数组
- 使用 Promise.all 来处理
- 代码如下:
// Vue.prototype.$http = axios
data() {
return {
data: {},
ids:['https://cnodejs.org/api/v1/topics','https://cnodejs.org/api/v1/topic/5433d5e4e737cbe96dcef3122','https://cnodejs.org/api/v1/user/alsotang']
}
},
getPromiseArray(groupIds) {
let promiseArray = []
for (let groupId of groupIds) {
let promise = this.$http.get(groupId)
promiseArray.push(promise)
}
return promiseArray
},
getAllResults(groupIds, callBack) {
let allResults = []
Promise.all(this.getPromiseArray(groupIds)).then(function (values) {
console.log(values,'values')
for (let i = 0; i < values.length; i++) {
allResults.push(values[i].data)
}
callBack(allResults)
})
},
mounted(){
this.getAllResults(this.ids,(datas)=>{console.log(datas)})
}
结果:能正常运行,最后确实得到了所有的结果
问题:这三个异步都成功的时候才能得到正确结果,如果有一个失败了程序就走不下去了.........
怎么解决?
- 加强版
- 加 .then ,将成功或是失败的结果都 return 出去
- 失败的结果处理一下再return
- 代码:
getPromiseArray(groupIds) {
let promiseArray = []
for (let groupId of groupIds) {
let promise = this.$http.get(groupId).then((res)=>{return res},(err)=> {return err.toString()})
promiseArray.push(promise)
}
return promiseArray
},
getAllResults(groupIds, callBack) {
let allResults = []
Promise.all(this.getPromiseArray(groupIds)).then(function (values) {
console.log(values,'values')
for (let i = 0; i < values.length; i++) {
if(values[i].data){
allResults.push(values[i].data)
} else {
allResults.push(values[i])
}
}
callBack(allResults)
})
},
如此,程序就能正常运行了
需求也就解决了