vue使用forEach循环加Promise.all来发送多个请求,并且等到所有请求结束后处理数据

项目场景:

  1. 项目中要根据一个 id 的数组列表,来查询所有的数据
  2. 需要对同一个接口循环发送多个请求,次数不定
  3. 必须等所有结果返回后,再处理数据,并展示

实现方法:

 //循环遍历产品id 查询定向包信息
    async getProductId() {
      // 请求队列
      let list = []
      this.tableBidgetData.forEach((e) => {
        // 循环推送请求到队列 (accountId = ['1', '2', '3'],则会同时发送3次请求)
        list.push(this.getDxp(e.accountId))
      })

      // 所有请求都已完成,直接返回或处理 res
      const res = await Promise.all(list)
      this.tableBidgetData.forEach((e) => { 
        res.forEach((n) => {
          e.dxpList = n.data.list
        })
      })
      this.tableKey += 1
    },

    // 定向包查询
    async getDxp(id) {
      let postData = {
        accountId: id,
        page: 1,
        size: 100,
      }
      const res = await audiencePackageList(postData)
      return res
    },

 

你可能感兴趣的:(学习笔记,vue.js,javascript,前端)