java全栈

如何使用Promise来同时请求多个数据

2020-09-07  本文已影响0人  PingerL

需求:多个请求,不管成功或失败,都希望拿到这些请求的结果,比如,第一个请求失败了,后面的请求还是继续,请问怎么实现?

  1. 将所有的异步请求的结果放入一个数组
  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)
        })
      },

如此,程序就能正常运行了
需求也就解决了

上一篇下一篇

猜你喜欢

热点阅读