只有在处理完所有记录后才重新加载页面

Question

我正在处理相当多的数据，但由于某种原因，页面在 post 之前重新加载，并且可以处理所有放置。我需要更新或创建大约 2k 条记录，但是当进程开始时它处理了一个很好的块然后重新加载页面......我知道这与我处理承诺和我的方式有关 async/awaits。有人可以深入了解我在这里做错了什么吗？

  ...
  // This is called via a button click
  const submitData = async () => {
     await updateRecords(existData)
     await createRecords(newData)
     await setCompleteStatus(true) // I think this might be part of the issue. How do I trigger this after the two previous async function complete?
   }

  // updates records
  const updateRecords = async (data) => {
    const location = dataSet === 'hfc' ? 'measurements' : 'metrics'
    const recordLength = data.length
    // If the object exists, update it via API
    if (recordLength > 0) {
      for (let i = 0; i < recordLength; i += 100) {
        const requests = data.slice(i, i + 100).map((row) => {
          return puts({ row, location }) 
            .catch(e => console.log(`Error updating record: ${row} - ${e}`))
        })
      }
    }
  }

  // creates records
  const createRecords = async (data) => {
    const location = dataSet === 'hfc' ? 'measurements' : 'metrics'
    const recordLength = data.length
    // If the object exists, update it via API
    if (recordLength > 0) {
      for (let i = 0; i < recordLength; i += 100) {
        const requests = data.slice(i, i + 100).map((row) => {
          return posts({ row, location }) 
            .catch(e => console.log(`Error creating record: ${row} - ${e}`))
        })
      }
    }
  }
 
  // api put request
  const puts = async ({ row, location }) => {
    const endpoint = `/api/${location}/record/${row.id}/`
    await axios.put(endpoint, row)
  }

  // api post request
  const posts = async ({ row, location }) => {
    const endpoint = `/api/${location}/create`
    await axios.post(endpoint, row)
  }

  // I'd like for the page to be redirected after all records have been processed
  if (completeStatus) {
    window.location.href = '/portal/'
  }
...

Answer 1

您需要解析承诺数组，作为映射函数 return 承诺。

const updateRecords = async(data) => {
  const location = dataSet === 'hfc' ? 'measurements' : 'metrics'
  const recordLength = data.length
  // If the object exists, update it via API
  if (recordLength > 0) {
    for (let i = 0; i < recordLength; i += 100) {
      const requests = await data.slice(i, i + 100).map((row) => { //Added await here
        return puts({
            row,
            location
          })
          .catch(e => console.log(`Error updating record: ${row} - ${e}`))
      });
      await Promise.all(requests); // Use this to await all the promises
    }
  }
}
// creates records
const createRecords = async(data) => {
  const location = dataSet === 'hfc' ? 'measurements' : 'metrics'
  const recordLength = data.length
  // If the object exists, update it via API
  if (recordLength > 0) {
    for (let i = 0; i < recordLength; i += 100) {
      const requests = await data.slice(i, i + 100).map((row) => { //added await here
        return posts({
            row,
            location
          })
          .catch(e => console.log(`Error creating record: ${row} - ${e}`))
      });
      await Promise.all(requests); // Use this to await all the promises
    }
  }
}

只有在处理完所有记录后才重新加载页面

Only reload page if all records have been processed

async-await

reactjs

es6-promise