美文网首页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来同时请求多个数据

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

  • Promise 和async/awiat

    Promise Promise的作用,promise如何进行多个数据的请求 Promise对象代表一个异步操作,有...

  • 前端js并发控制实现

    在开发中, 我们经常会遇到多个请求同时进行的需求,请求不多时,我们可以直接使用Promise.all()来进行并发...

  • 关于Promise

    Promise.all () 可以使用Promise.all 封装多个请求,这时候返回的数据会封装成数组,在使用[...

  • Node.js 简单爬虫实践

    1、简单抓取一个网页的数据信息 2、利用 Promise 同时异步请求多个页面 3、模拟提交请求

  • es6:promise

    异步任务,请求服务器数据: 传入请求地址,调用 调用结果 等待多个promise:Promise.all(prom...

  • promise(ES6)

    promise.all 多个起步请求,要所有的请求都拿到结果了再执行操作 promise.race 多个请求,只...

  • await 与 Promise.all 结合使用

    当遇到多个可以同时执行的异步任务时,就需要使用 Promise.all。 Promise.all 方法用于将多个 ...

  • Android Rxjava+Retrofit 多个异步请求全部

    TODO 实现类似es6语法中promise.all()多个请求成功后才处理数据。

  • ES7 - async/await处理异步

    当我还在使用promise来发送异步请求的时候,部门前端大佬已经改用async/ await了,代码很简洁,同时a...

网友评论

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

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