Правильное использование fetch

Question

По условию задачи есть массив данных с пользователями и условный api "https://", проверяющий онлайн ли пользователь по id (возвращает true или false). Необходимо вывести новый массив данных, включающий isOnline для каждого пользователя. Можно ли назвать решение верным и как можно его оптимизировать?

      const people = [{ name: "Vlad", id: 1 }, { name: "Victor", id: 2 }];

      function getOnline() {
        const newArr = [...people];
        people.forEach((item, index) => {

          fetch(`https://${item.id}`)
            .then((response) => {
              return response.json();
            })
            .then((data) => {//true/false
              newArr[index].isOnline = data;
            });
            
        });
        return newArr;
      }

      console.log(getOnline());

Answer 1

Для наглядности я добавил в код квази-fetch, который 1) асинхронный, 2) нормально применим в вашем коде.

const people = [
  { name: "Vlad", id: 1 },
  { name: "Victor", id: 2 }
];

const res = getOnline(people);
console.log(JSON.stringify(res));


function getOnline(peopleList) {
  const newArr = [...peopleList];

  people.forEach((item, index) => {

    fetch(`https://${item.id}`)
      .then((response) => response.json())
      .then((data) => newArr[index].isOnline = data);

  });

  return newArr;
}

function fetch() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        json: () => Promise.resolve(false)
      });
    }, 100 * Math.random());
  });
}

При запуске вашей функции возвращается массив в котором нет ключей isOnline так как асинхронный fetch не выполнился к моменту вывода данных в лог. getOnline выполнился в синхронном режиме, вернув "новый" массив и запустив ряд асинхронных операций, при этом не дождался выполнения этих всех асинхронных операций.

Можно ли назвать решение верным и как можно его оптимизировать?

Отвечая на ваш вопрос, нельзя назвать ваше решение верным. Прочитайте ещё раз все простые учебные материалы про Promise, обратите внимание на Promise.all. После этого попробуйте переделать решение.

Про оптимизацию писать пока не буду так как бессмысленно заниматься ею пока нет верного решения.

БЛОГ НА HUSL

Правильное использование fetch

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