工作问题记录——1 使用Promise.all多次请求同一个接口

789 阅读1分钟

需求

表格数据中有一列需要更具表格中的参数 向后端请求数据

问题

  1. 多次请求同一个接口浏览器会报错
  2. 请求回来数据怎么匹配到请求参数所对于的那一行
    async getData () {
      let list = [{ value: 1, name: '' }, { value: 2, name: '' }, { value: 3, name: '' }]
      const promiseList = list.map((item, t) => {
        return new Promise((resolve, rejects) => {
          let params = {
            value: item.value
          }
          setTimeout(() => {
            resolve(
              this.$API.getlist(params) //请求数据
            )
          }, ++t * 500) //间隔500毫秒请求一次
        })

      })
      const res = await Promise.all(
        promiseList.map((res) => {
          res.catch((e) => console.log(e)) //抛出错误当有一个请求失败时可以继续请求下一个
        })
      )

      if (res) { //此时的res 是所有返回的数据,循环这个数据可以得到单次请求一样的数据结构更具需求处理数据即可
        for (let i = 0; i < res.length; i++) {
          const element = array[i];
          list[i].name = element.name
          //遍历数据给name赋值
        }
      }
    }