Promise.all的用法

最新推荐文章于 2024-06-18 08:00:00 发布

kiss约

最新推荐文章于 2024-06-18 08:00:00 发布

阅读量176

点赞数

文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/m0_47014098/article/details/129789654

版权

文章讲述了在后台管理系统中，使用ProTable组件渲染表格数据时遇到的问题。表格第一列显示图片，图片地址需通过接口2获取，该接口需要接口1返回的主键id作为参数。通过Promise.all实现并发请求接口2，获取所有图片地址，并将结果合并到表格数据中展示。

摘要由CSDN通过智能技术生成

Promise.all的用法

最近做的一个后台管理系统的有一个表格数据的渲染，用的是ProTable组件，表格数据的第一列展示的是图片，但是获取图片地址的是接口2，而获取表格数据是接口1。调用接口2需要携带的参数获取表格数据的主键id。
在这里插入图片描述

现在遇到的问题就是：

调用接口1，拿到每一行的主键id，然后再分别用每一行的主键id，去调用接口2，去获取到每一行的图片地址，进而把图片展示到每一行的列表。

使用Promise.all

//接口1中获取表格数据
const requestData = async (params, sorter, filter) => {
    params.pageNumber = current
    params.pageSize = pageSize 
    delete params.current
	data = await api.selectByPage({ columnId:selectedKey,...params })
      if (data.code == "1") {
        //循环遍历接口1的数据拿到每一行的id，统一去请求接口2
        let picPromise = data.data.map((item) => {
          if(item.bannerFileId){
            // 在循环中调用接口2，参数传id
            return api.downloadFileAddressRecord({fileId:item.bannerFileId})
          }
        })
        //Promise.all前记得加await
        await Promise.all(picPromise).then((result) => {
          // result是 一起请求接口2返回的数据的集合，一个item就是一个接口2返回的数据，需要遍历
          result.forEach((item,index) => {
            // 遍历拿到每一个接口2中的url拼接到接口1里边的每一项中
            data.data[index].url = item?.data
          }) 
        })
       return {
          data: data.data,
          success: true,
          total: data.data.total,
        }
      } else {
        return {
          data: [],
          success: true,
        }
      }
    }
  }