javascript 在React的useEffect()中使用Async Await的多个API调用Hook并获取第一个API调用的响应,然后是第二个API调用,然后是第三个API调用[重复]

zzzyeukh  于 2023-04-04  发布在  Java
关注(0)|答案(3)|浏览(157)

此问题在此处已有答案

How to run 2 async calls in sequence?(5个答案)
昨天关门了。
这篇文章是22小时前编辑并提交审查的。
我想得到第一个响应,然后第二个响应,然后在控制台部分第三个响应,但我不能实现这一点。请帮助我解决这个问题。
我试图用这种方法解决我的问题。

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;
fkvaft9z

fkvaft9z1#

还可以在useEffect中定义执行函数

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

hc2pp10m2#

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

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;
klh5stk1

klh5stk13#

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://pokeapi.co/api/v2/pokemon`);
      console.log("res-1",res)
    }

    async function getDataTwo() {
      const res = await axios.get(`https://jsonplaceholder.typicode.com/todos/1`);
      console.log("res-2",res)
    }

    getDataZero();
    getDataOne();
    getDataTwo();

  }, [])

相关问题