等待一个提取完成，然后再开始下一个

Question

我有要发送到Google Cloud的数据列表。我当前的代码如下所示：

const teams = ['LFC', 'MUFC', 'CFC'];

teams.forEach(team => {
    fetch({
      url: URL,
      method: 'PUT',
      body: team
    });
})

这适用于一个，team但是如果发送多个文件并且文件更大，则会超时。我正在发送图像而不是字符串。为了解决这个问题，我需要POST一个文件一个数据，并等待前一个文件POST完成后再发送下一个文件。谁能建议最好的方法？

值得注意的是，我对上载的文件数量没有任何控制。

Answer 1

使用reduce的，而不是forEach与.then()。

以下代码将存储最后一个fetch入栈acc（的累加器参数reduce）的承诺，并将新的内容附加到侦听器fetch内部then，以确保前一个fetch已完成：

const teams = ['LFC', 'MUFC', 'CFC'];

teams.reduce((acc,team) => {
    return acc.then(()=>{
      return fetch({
        url: URL,
        method: 'PUT',
        body: team
      });
    })
}, Promise.resolve())
.then(()=>console.log("Everything's finished"))
.catch(err=>console.error("Something failed:",err))

//Simulate fetch:
const fetch = team => new Promise(rs => setTimeout(() => {rs();console.log(team)}, 1000))

const teams = ['LFC', 'MUFC', 'CFC'];

teams.reduce((acc, team) => {
  return acc.then(() => {
    return fetch({
      url: URL,
      method: 'PUT',
      body: team
    });
  })
}, Promise.resolve())
  .then(() => console.log("Everything's finished"))
  .catch(err => console.error("Something failed:", err))

或者，如果可以的话，甚至更好地使用async/await（更具可读性）：

const teams = ['LFC', 'MUFC', 'CFC'];

async function upload(teams){
  for(const team of teams){
    await fetch({
      url: URL,
      method: 'PUT',
      body: team
    });
  }
}

upload(teams)
.then(()=>console.log("Everything's finished"))
.catch(err=>console.error("Something failed:",err))

//Simulate fetch:
const fetch = team => new Promise(rs => setTimeout(() => {rs();console.log(team)}, 1000))

const teams = ['LFC', 'MUFC', 'CFC'];

async function upload(teams) {
  for (const team of teams) {
    await fetch({
      url: URL,
      method: 'PUT',
      body: team
    });
  }
}

upload(teams)
  .then(() => console.log("Everything's finished"))
  .catch(err => console.error("Something failed:", err))

Answer 2

您可以将 async/await 与 for...of 循环一起使用。每次调用都会“保持”循环，直到完成，然后循环将继续下一次调用：

const teams = ['LFC', 'MUFC', 'CFC'];

async function send(teams) {
  for (const team of teams) {
    await fetch({
      url: URL,
      method: 'PUT',
      body: team
    });
  }
}