Как сделать запрос цикла с React, используя Axios?

Question

Как я могу выполнить цикл запроса Axios для заполнения массива объектов?

Я пытаюсь создать веб-интерфейс, который использует API-интерфейс Star Wars под названием swapi.Доступ к нему можно получить по этой ссылке: https://swapi.co/

Я могу искать людей, звездные корабли, планеты, виды и фильмы.Так, например, если я хочу найти Люка Скайуокера, я добавлю / api / people / 1 / like https://swapi.co/api/people/1/.

Пока все хорошо.

Теперь,если я хочу, чтобы все персонажи «Звездных войн», я просто удаляю число 1, URL будет https://swapi.co/api/people/, и я думаю, что у меня будут первые десять символов из 87, я думаю.

Но я не10. Я хочу их всех ... Это заставляет меня сделать несколько запросов, чтобы получить все данные символов.Проблема в том, что если я использую цикл для выполнения запросов, скажем, цикл while, он завершает весь поиск до того, как самый первый запрос переносит данные в мой код для обработки.

Я используюглобальное состояние через Redux, и я вызываю Redux Thunk через componentDidMount ().На самом деле все работает нормально, и первые десять символов данных извлекаются, и они заполняют мой метод рендеринга в React.Но как я могу сделать несколько запросов без цикла, который заканчивается перед этими запросами?

Спасибо.

Answer 1

Это мое решение, если я правильно понял ваш вопрос, используя async / await:

getCharacter = async i => {
  let { characters } = this.state;
  let res = await axios.get(`https://swapi.co/api/people/${i}/`);
  characters.push(res);
  this.setState({ characters });
  return res;
};

componentDidMount() {
  // ids = [1, 2, 3, ..., 10]
  let ids = Array.from({length: 10}, (v, k) => k+1)
  Promise.all(ids.map(id => this.getCharacter(id)))
}

вот полный код в codeandbox: https://codesandbox.io/embed/axios-react-ojpew?fontsize=14