在 React 的 useEffect() 钩子中使用异步等待的多个 API 调用，并获得第一个 api 调用的响应，然后是第二个 api 调用，然后是第三个 api 调用

Question

我想在控制台部分获得第一个响应，然后第二个响应，然后第三个响应，但我无法实现这一点。请帮我解决这个问题。

这是输出，我试着用这种方法解决我的问题。

import './App.css';
import { useEffect } from 'react';
import axios from 'axios';
function App() {
useEffect(() => {
async function getDataZero() {
const res = await axios.get(`https://pokeapi.co/api/v2/pokemon/1`);
console.log("res-0",res)
}
async function getDataOne() {
const res = await axios.get(`https://jsonplaceholder.typicode.com/todos/1`);
console.log("res-1",res)
}
async function getDataTwo() {
const res = await axios.get(`https://pokeapi.co/api/v2/pokemon`);
console.log("res-2",res)
}
getDataZero();
getDataOne();
getDataTwo();
}, [])
return (
<div className="App">
<header className="App-header">
<p>React app</p>
</header>
</div>
);
}
export default App;

Answer 1

你也可以在useEffect

中定义一个执行函数

useEffect(() => {
...
async main() {
await getDataZero() 
await getDataOne()
await getDataTwo()
}
main()
}, [])

Answer 2

我已经修改了你的代码，在某种程度上，它将等待每个承诺，然后移动到下一个。

import './App.css';
import { useEffect } from 'react';
import axios from 'axios';
function App() {
useEffect( async () => { // <--- use async here
async function getDataZero() {
const res = await axios.get(`https://pokeapi.co/api/v2/pokemon/1`);
console.log("res-0",res)
}
async function getDataOne() {
const res = await axios.get(`https://jsonplaceholder.typicode.com/todos/1`);
console.log("res-1",res)
}
async function getDataTwo() {
const res = await axios.get(`https://pokeapi.co/api/v2/pokemon`);
console.log("res-2",res)
}
await getDataZero(); // <--- await keyword in front of each function
await getDataOne();
await getDataTwo();
}, [])
return (
<div className="App">
<header className="App-header">
<p>React app</p>
</header>
</div>
);
}
export default App;