美文网首页java全栈
如何使用Promise来同时请求多个数据

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

作者: PingerL | 来源:发表于2020-09-07 21:46 被阅读0次

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

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

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

    相关文章

      网友评论

        本文标题:如何使用Promise来同时请求多个数据

        本文链接:https://www.haomeiwen.com/subject/ntylektx.html