React - 对 API 的多个 Ajax 调用

【问题标题】：React - Multiple Ajax Calls to APIReact - 对 API 的多个 Ajax 调用
【发布时间】：2020-05-27 09:07:39
【问题描述】：

我想调用 api 来获取一组车辆。一旦实现这一点，我想遍历数组并为每个车辆详细信息调用 API。

即 2 个 API 端点

/车辆

/vehicles/{id}

在 React 中最好的方法是什么？另外，最好使用 fetch/await

【问题讨论】：

听起来你知道你想如何做到这一点（使用 fetch/await）。你有什么问题？一些代码会很有帮助

标签： ajax reactjs promise

【解决方案1】：

我建议用 Promises 来做这件事。最初您获取数据，然后使用Promise.all() 和Array.map() 循环遍历数组项并获取它们的详细信息（并行）。

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);
 })

Link to JS Fiddle

【讨论】：