带有异步调用的 ES6 循环

Question

我需要编写一些 Javascript（ES6 版本）来执行以下任务：

1. 字符串为“item1,item2,item3,item4,item5”，
2. fetch() 使用此字符串的 URL。
3. 如果响应标志成功，则完成并退出。
4. 如果响应标志为失败，则删除最后一项 (item5)，因此现在字符串为“item1,item2,item3,item4”并重复第 2 步。
5. 如果没有更多物品可掉落，请退出。

项目的总数是可变的。因此，我计划使用 do-loop 执行此任务，使用以下结构：

//suppose str = 'item1,item2,item3,....itemN'
do {
    fetch(url, {param1: str}).then(response => {
        //check the response flag, if success, done and exit.
        //if not success, drop one item and re-do fetch
    })
}

问题是 fetch 是一个异步调用，所以我不能强制每个 fetch 按顺序执行。

我需要确保仅在前一个 fetch() 失败时才执行新的 fetch()。有什么想法吗？

Answer 1

你可以使用递归：

function fetchRecursive(param) {

  return fetch(url, {param1: param})
    .then(response => response.ok ? response : Promise.reject(new Error(response.status)))
    .catch((err) => {
      if (param.length > 1) {
        return fetchRecursive(param.slice(0,-1));
      } else {
        return Promise.reject(err);
      }
    })
}

fetchRecursive([ 'item1', 'item2', 'item3', 'item4' ])
  .then(response => { ... })
  .catch(err => { ... });

Answer 2

也许你可以使用递归，像这样：

//str = 'item1,item2,item3,....itemN'
function fetchUrl(str){
  fetch(url, {param1: str}).then(response => {
        if(response.success){
          //exit from the program
          return response;
        }
        else
        {
          return fetchUrl(str.split(",").pop().join(","));
        }
    });
}

Answer 3

在 for 循环中使用 await 而不是 then