需求:多個請求,不管成功或失敗,都希望拿到這些請求的結果,比如,第一個請求失敗了,后面的請求還是繼續(xù),請問怎么實現(xiàn)?
- 初版
- 將所有的異步請求的結果放入一個數(shù)組
- 使用 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)
})
},
如此,程序就能正常運行了
需求也就解決了