(react项目记录)数组遍历时发送请求,将每个请求的结果拿到后统一再做处理

前言

在和后端同学对接的过程中,有一个业务逻辑,数组进行遍历发送请求,后端同学在接口里面返回true或false传的参数是否符合条件。最后将符合条件的数据发送给后端同学。
因为请求发送是异步的形式,假如类似下面这种写法

const saveContraCalculateData = (saveData) => {
    
    
 let _isExceedFlags = []
 // selectedDeviceRows:table里面被选中的数据
 selectedDeviceRows.map((item) => {
    
    
    const params = {
    
    
        id: item.id,
      }
    apis.calculateAmountIsExceeds(params).then((res) => {
    
    
        const {
    
     isExceed, remainAmount } = res.data
        _isExceedFlags.push(isExceed)
        }
    }).catch((err) => {
    
     console.log(err) })  
    console.log(_isExceedFlags) // []
}

因为是异步发送的,所以拿不到数据。_isExceedFlags是空的。
但是又需要通过返回的数据来进行下一步请求,所以可以将异步变为同步。用到promise.all()方法

const saveContraCalculateData = async (saveData) => {
    
    
      let _isExceedFlags = []
      let pl = selectedDeviceRows.map(async (item) => {
    
    
        const params = {
    
    
          id: item.id,
        }
        await apis.calculateAmountIsExceeds(params).then((res) => {
    
    
          const {
    
     isExceed, remainAmount } = res.data
          _isExceedFlags.push(isExceed)
        }).catch((err) => {
    
     console.log(err) })
      })
      // 将异步方法变为同步,数组遍历的写法
      // for (let i = 0; i < pl.length; i++) {
    
    
      //   await pl[i];
      // }
      // promise的写法
      await Promise.all(pl)
      console.log(_isExceedFlags) // ['...',''...,'...']
   }

这个时候能拿到数据,就可以做自己想做的各种操作了
注意:用到了await函数要用async接收
调用

saveContraCalculateData()

猜你喜欢

转载自blog.csdn.net/weixin_45701199/article/details/128955250