响应多个获取请求答案

【问题标题】：React Multiple Fetch Requests响应多个获取请求
【发布时间】：2020-02-22 03:03:28
【问题描述】：

我正在发出 2 个获取请求。我想将数据转换为 JSON，然后将其设置为变量。

async componentDidMount() {

     Promise.all([
        await fetch('/link1'),
        await fetch('/link2'),
    ]).then(links => {
        const response1 =  links[0]
        const response2 = links[1]  

        const res1 = response1.json()
        const res2 = response2.json()            
    })

    const data1 = res1.data
    const data2 = res2.data

    ...

我无法将 data1 和 data2 设置为响应。我是新手，所以我不确定如何格式化它。如何设置data1和data2？

【问题讨论】：

你超出了范围，这就是为什么它没有像你认为的那样工作。最终目标是什么，需要从哪里访问这些变量？函数、模块、全局？
我只是将这些变量传递给一些函数来转换数据。然后它被传递到组件下方的 d3

标签： javascript reactjs

【解决方案1】：

你可以这样做

let data = [];

Promise.all([fetch("/link1"), fetch("/link2")])
      .then(responses =>
        responses.forEach(res => res.json().then(body => data.push(body)))
      )
      .catch(err => console.error(err));

【讨论】：

这个答案优于在异步函数中等待所有内容。它会尽快开始所有这些提取。
.json() 不也是异步的吗？ .json() 不应该在 Promise.all 中吗？
你是对的。我刚刚检查了这个。更新答案。
感谢您的帮助！我接受了你的回答。但是，我怎样才能在其中实现res.send？
您能详细说明一下吗？ res.send 是什么意思？如果您指的是 API 响应参数，则该参数将出现在您支持的 API 代码中。然而，上面的代码是你前端的一部分，在你的 React 项目中。我假设这是因为上面发布的标签是 reactjs

【解决方案2】：

如果您需要访问渲染下的这些变量，通常将它们存储在状态变量中。

async componentDidMount() {

 Promise.all([
    await fetch('/link1'),
    await fetch('/link2'),
]).then(links => {
    const response1 =  links[0]
    const response2 = links[1]  

    const res1 = response1.json()
    const res2 = response2.json()
    this.setState({data1: res1.data, data2: res2.data})
})

然后使用你可以使用data1和data2作为this.state.data1/2

要了解您所做的工作为何不起作用，您需要阅读有关 Promise 工作原理的更多信息。 (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)

主要原因是因为JS是异步的，所以data1和data2是在Promise.all被触发的同时赋值的。

【讨论】：

【解决方案3】：

这是我将如何进行多次提取。

Promise.all(
  [
    'https://jsonplaceholder.typicode.com/todos/1',
    'https://jsonplaceholder.typicode.com/todos/2'
  ].map(url => fetch(url).then(r => r.json()))
).then(results => console.log(results))

Promise.all 接受一组承诺并返回一个新的承诺，当所有提供的承诺都完成时，该承诺就完成了。

最好在 thenable 链中执行.json() 工作（因为到 JSON 的转换和获取一样是异步的）。然后就等待两个最终结果。

Promise.all 的结果是每个 Promise 的结果的数组（按照您向 Promise.all 提供 Promise 的相同顺序——无论它们以哪个顺序完成。）

【讨论】：

【解决方案4】：

不要同时使用 await 和 Promise。您可以尝试这样来获得预期的输出。

    async componentDidMount() { 
        const link1Fetch = await fetch('/link1');
        const link2Fetch = await fetch('/link2');
        const data1 = await link1Fetch.json();
        const data2 = await link2Fetch.json();
        console.log(data1, data2);
    }

【讨论】：

您确实需要使用Promise.all 来并行化fetch 请求。此代码一次只执行一次提取。
是的，我想我确实需要Promise.all，但如何将数据设置为变量？