Как записать данные из трех асинхронных запросов в три разные переменные и потом отправить их дальше в другой функционал?

Здравствуйте товарищи!

Есть три переменные

let person1, person2, person3;

А также есть три запроса на /people/1, people/2, people/3, окончательный результат которых мы присваиваем одной из переменных выше соответственно

fetch('https://swapi.dev/api/people/1', {
  method: 'GET',
})
  .then((res) => {
    return res.json();
  })
  .then((res) => {
    console.log(res);
    person1 = res;
  });

Далее нужно три новых переменных передать в функцию goFurther

function goFurther(person1, person2, person3) {
  console.log(person1, person2, person3);
}

Не могу понять как справиться с этой задачей без setTimeout.

Пытаюсь решить данную задачку с помощью Promise или async, await - однако никак не могу разобраться.

Пожалуйста помогите конкретно с этим примером! Аналогия от решения сильно поможет мне разобраться. Также не могу понять как здесь применить callback схему.


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

Автор решения: EzioMercer

Кстати, запрос можно вынести как отдельную функцию, чтобы 3 раза не дублировать код:

const logPersons = (person1, person2, person3) => {
  console.log('person1', person1);
  console.log('person2', person2);
  console.log('person3', person3);
}

const getPerson = async(personId) => {
  try {
    const response = await fetch(`https://swapi.dev/api/people/${personId}`);

    if (response.ok) {
      const data = await response.json();

      return data;
    } else {
      console.log(response);
    }

  } catch (e) {
    console.log(e.message);
  }
}

const getPersons = async() => {
  let [
    person1,
    person2,
    person3
  ] = await Promise.allSettled([
    getPerson(1),
    getPerson(2),
    getPerson(3)
  ]);

  logPersons(person1, person2, person3);
}

getPersons();

→ Ссылка