如何使用Promise來同時請求多個數(shù)據(jù)

需求:多個請求,不管成功或失敗,都希望拿到這些請求的結果,比如,第一個請求失敗了,后面的請求還是繼續(xù),請問怎么實現(xiàn)?

  • 初版
  1. 將所有的異步請求的結果放入一個數(shù)組
  2. 使用 Promise.all 來處理
  3. 代碼如下:
//    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)})
    }

結果:能正常運行,最后確實得到了所有的結果
問題:這三個異步都成功的時候才能得到正確結果,如果有一個失敗了程序就走不下去了.........
怎么解決?

  • 加強版
  1. 加 .then ,將成功或是失敗的結果都 return 出去
  2. 失敗的結果處理一下再return
  3. 代碼:
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)
        })
      },

如此,程序就能正常運行了
需求也就解決了

?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

友情鏈接更多精彩內(nèi)容