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 () завершился неудачей. Есть идеи?

Answer 1

Может быть, вы можете использовать рекурсию, что-то вроде этого:

//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 2

Вы можете использовать рекурсию:

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 3

используйте await вместо then в цикле for