响应多个获取请求

Question

我正在发出两个获取请求。我想将数据转换为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

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

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接受一系列Promise，并在所有提供的Promise都完成时返回一个完整的新Promise。

最好在数据链中执行.json()工作(因为到JSON的转换和提取都是异步的(。然后等待两个最终结果。

Promise.all的结果是每个Promise的结果的数组(按照您向Promise.al提供Promise的相同顺序——它们以哪个顺序完成并不重要。(

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