Question

我正在发出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？

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

Answer 2

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

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是异步的，所以在触发Promise.all的同时分配了data1和data2。

Answer 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接受一个诺言数组，并返回一个新的诺言，当所有提供的诺言都完成时，该诺言就完成了。

最好在可伸缩链中进行.json()工作（因为到JSON的转换以及获取都是异步的）。然后等待两个最终结果。

Promise.all的结果是每个诺言的结果的数组（按照您向Promise.all提供诺言的顺序-无关其完成的顺序。）

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

响应多个提取请求

4 个答案: