Что такое хороший способ для вызова AJAX API несколько раз в массиве?

Question

У меня есть массив идентификаторов, и я вызываю api, как это, я не уверен, если это правильно, что, если на некотором идентификаторе это потерпит неудачу?

const myFunc = async () => {
try {
      for (const todoId of todoIds) {
        await fetch(
          `https://abcd123poiuy.mockapi.io/users/${
            user!.id
          }/todos/${todoId}`,
          {
            method: 'PUT',
            headers: {
              Accept: 'application/json',
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({complete: completeAll}),
          },
        );
      }
      setLoading(false);
    } catch (clearCompletedError) {
      setError(clearCompletedError);
      setLoading(false);
    }
   }

должно в то время как l oop а может рекурсия хорошая? Просьба помочь

Answer 1

Цепочка обещаний - это концепция, которая последовательно выполняет последовательность асинхронных задач. Разработчик может контролировать каждый блок Promise и предпринимать действия для следующей последовательности выполнения Promise.

Параллельное обещание - (или) - Параллельные микрозадачи :

С Promise.all, Promise.race и Promise.allSettled вы получаете контроль над выполнением всех сработавших обещаний.

Преимущество: Параллельно запускайте все асинхронные задачи и экономьте время.

Помните: Promise.all вернет только первое отклонение несмотря на то, что в ваших AJAX вызовах может быть более одного отклонения & Promise.race вернет результат отклоненного или выполненного обещания, которое произойдет раньше.

Realtime UseCase: ( Нет цепочки ) с использованием Promise.allSettled

В реальном мире благоразумно, что все fetch вызовы будут выполнены одновременно и разрешено / отклонено статус известен в будущем. В этом случае имеет смысл знать, что все вызовы fetch пройдены или не выполнены, и предпринять корректирующие действия только для тех, которые требуют внимания к состоянию. Таким образом сохраняются сетевые обходы!

Пример ниже для Promise.allSettled & Promise.all, чтобы показать разницу. (Прочитайте комментарии к коду)

const dummy = [{ //Dummy data
  value: 1,
  delay: 100,
  reject: true, //flag to explicitly reject this data
},{
  value: 2,
  delay: 200
},
{
  value: 3,
  delay: 300,
},
{
  value: 4,
  delay: 400,
  reject:true
}];

const fakeFetch = function(req){ // Fake fetch call
  return new Promise(function(resolve, reject) {
    console.log("API:", req.value);
    setTimeout(req.reject ? reject : resolve, req.delay, req.value);
  })
}

const promiserSettled = async ()=>{
  let collate = [];
  for(let req of dummy){
    collate.push(fakeFetch(req));
  }
  try{ // Promise.allSettle code block
    const everthing = await Promise.allSettled(collate).then((values)=>{
      throw values.filter((val) => val.status === "rejected");
    })
    console.log("Are we done: ", everthing);
  }catch(e){
    console.log("Promise.allSettled - Rejected Value:", e); // Logs all rejected data
  }

  try{ // Promise.all code block
    const everthing = await Promise.all(collate);
    console.log("Are we done: ", everthing); 
  }catch(e){
    console.log("Promise.all - Rejected Value:", e); // Logs only one rejected data
  }
};

promiserSettled(); // Execute main

Answer 2

Я бы набрал sh все обещания в массиве и выполнил Promise.all, так как вы хотите, чтобы он потерпел неудачу в случае сбоя.

const promises = []

for (const todoId of todoIds) {
  promises.push(fetch(`someUrlwith${todoId}`));
}

Promise.all(promises).then(() => {
// success callback
}).catch(() => {
// at least one of them failed
})

Другое решение, если вы хотите вызвать их одно в время

function loopFetch(i) {
  if (i >= todoIds.length) return; // stop when reached end
  return fetch(`someUrl${todoIds[index]}`).then(() => {
    return loopFetch(++i);
  });
}
loopFetch(0);