等待一次提取完成，然后再開始下一次提取

Question

我有一個要發送到谷歌雲的數據列表。 我當前的代碼如下所示：

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

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

這適用於一個team ，但如果發送多個文件並且文件更大，則會超時。 我正在發送圖像而不是字符串。 為了解決這個問題，我需要一個一個地POST數據，並等待前一個POST完成，然后再發送下一個。 任何人都可以建議這樣做的最佳方法嗎？

值得注意的是，我無法控制上傳的文件數量。

Answer 1

使用reduce而不是forEach和.then() 。

下面會將最后一次fetch的 promise 存儲在acc （ reduce的 accumulator 參數）中，並將新的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))

您甚至可以為它編寫一個通用助手 function：

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

const promiseSeries = cb => teams.reduce((acc, elem) => acc.then(() => cb(elem)), Promise.resolve())

promiseSeries((team) => {
  return fetch({
    url: URL,
    method: 'PUT',
    body: team
  })
})
  .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']; const promiseSeries = cb => teams.reduce((acc, elem) => acc.then(() => cb(elem)), Promise.resolve()) promiseSeries((team) => { return fetch({ url: URL, method: 'PUT', body: team }) }).then(() => console.log("Everything's finished")).catch(err => console.error("Something failed:", err))

或者，更好的是，如果可以（它是 ES2017），請使用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
    });
  }
}

Answer 3

您可以使用 async/await，如下所示：

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

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