(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()