Реагировать - несколько Ajax вызовов API

Question

Я хочу сделать вызов API, чтобы получить массив транспортных средств. Как только это будет достигнуто, я хочу провести l oop через массив и вызвать API для каждой детали транспортного средства.

т.е. 2 конечных точки API

/ vehicle

/ vehicle / {id}

Каков наилучший способ сделать это в React? Также желательно использовать fetch / await

Answer 1

Я бы предложил сделать это с Обещаниями. Сначала вы выбираете свои данные, а затем используете Promise.all() и Array.map() l oop элементов массива желобов и извлекаете детали для них (параллельно).

fetch('https://my-json-server.typicode.com/typicode/demo/posts')
 .then(res => res.json())
 .then(async data => {
      const details = await Promise.all(data.map(post => {
    return fetch(`https://my-json-server.typicode.com/typicode/demo/posts/${post.id}`)
      .then(res => res.json());
  }));
  console.log(details);
 })

Ссылка на JS Fiddle