Как сделать выполнение fetch в цикле for последовательным?

Question

Получаю через fetch массив с идентификаторами пользователей. Затем нужно циклом пройти по ним и подставить значения в другой запрос: fetch(`${someUrl}${userID}`). Сделать нужно так чтобы каждый следующий fetch запрос выполнялся только после завершения предыдущего. Понимаю что нужно копать в сторону async/await, но для меня это сложновато на данный момент. Прошу помочь с кодом.

getUsers() {
  fetch(`${url-get-users-id}`)
    .then((response) => {
      if (response.ok) {
        return response.json();
      } else {
        throw new Error("Error");
      }
    })
    .then((data) => {    
      for (let i = 0; i < data.length; i++) {
         fetch(
          `${get-users-detail-info-by-id}/${data[i]}`
        ).then((response) => {
          if (response.ok) {
            return response.json();
          }
          else {
            throw new Error("Error");
          }
        })
        ,then((data) => {
          this.usersInfo = data;
        })
        .catch((e) => {
          console.log(e);
        });
      }
    })
    .catch((e) => {
      console.log(e);
    });
}

Answer 1

Действительно, в данном случае удобнее будет воспользоваться async/await.

Для переделывания достаточно заменить then на await, а .catch на try..catch, а также указать что функция теперь async

async getUsers() {
  try {
    const response = await fetch(`${url-get-users-id}`);
    if (!response.ok) {
      throw new Error("Error");
    }
    const data = await response.json();

    for (let i = 0; i < data.length; i++) {
      const response = await fetch(
        `${get-users-detail-info-by-id}/${data[i]}`
      );
      if (!response.ok) {
        throw new Error("Error");
      }
      try {
        const data = await response.json();
        this.usersInfo = data;
      } catch(e) {
        console.log(e);
      };
    }
  } catch (e) {
    console.log(e);
  };
}

Answer 2

Создадим асинхронную функцию, которая будет делать вызов для каждого элемента массива и дожидаться ответа.

async function getUserDetails(users) {
  // Если пользлователей нет, то выходим
  if (!users.length) return;
  for (let i = 0; i < users.length; i++) {
    // Ждем ответа
    await fetch(`${get-users-detail-info-by-id}/${users[i]}`)
      .then((response) => response.json()) // переводим ответ в json
      .then((data) => {
        // в data полученный ответ по пользователю
        // Сюда надо добавить вашу обработку данных
      });
  }
}

В основной функции добавляем ее вызов и передаем полученный массив

getUsers() {
  fetch(`${url-get-users-id}`)
    .then((response) => {
      if (response.ok) {
        return response.json();
      } else {
        throw new Error("Error");
      }
    })
    .then((data) => {
      // Передаем полученный массив в отдельную фукнцию
      getUserDetails(data);
    })
    .catch((e) => {
      console.log(e);
    });
}

Если есть зависимость от контекста исполнения, то тут уже надо смотреть более предметно на код. В частности, где объявлена переменная get-users-detail-info-by-id и что такое this.usersInfo

БЛОГ НА HUSL

Как сделать выполнение fetch в цикле for последовательным?

Ответы (2 шт):