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

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

  • 初版
  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)
        })
      },

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容