在收到第一个 api 的响应后向另一个 api 发出请求

Question

我想从第一个api的res.data信息中获取res.data.login的信息，并发送给第二个api

然后我想得到第二个的结果api

const [user, setUser] = useState(null);
const [projects,setProjects]=useState(null)

useEffect(() => {
axios.get("http://localhost:5000/user", {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  })
  .then((res) => {
    setUser(res.data);
  })
  .catch((error) => {
    console.log("error " + error);
  });

const username = user.login
axios.get(`http://localhost:5000/projects`,{
    headers:{
      username:username,
    }
  }).then((response)=>{
    setProjects(response.data)
  })
}, []);

我寻找过类似的问题，但找不到解决方案。

Answer 1

两个选项...

选项 1

将第二个 Axios 调用从第一个

移动到 .then()

useEffect(() => {
  axios
    .get("http://localhost:5000/user", {
      headers: {
        Authorization: `Bearer ${token}`,
      },
    })
    .then(({ data: userData }) => {
      setUser(userData);

      return axios
        .get("http://localhost:5000/projects", {
          headers: { username: userData.login }, // use response data here
        })
        .then(({ data: projectsData }) => {
          setProjects(projectsData);
        });
    })
    .catch(console.error);
}, []);

选项 2

在效果挂钩中触发第二个请求，将 user 作为依赖项

useEffect(() => {
  axios
    .get("http://localhost:5000/user", {
      headers: {
        Authorization: `Bearer ${token}`,
      },
    })
    .then(({ data }) => {
      setUser(data);
    })
    .catch(console.error);
}, []);

useEffect(() => {
  if (user) { // only run once user is not null
    axios
      .get("http://localhost:5000/projects", {
        headers: { username: user.login }, // use state data here
      })
      .then(({ data }) => {
        setProjects(data);
      })
      .catch(console.error);
  }
}, [user]);

Answer 2

您需要获取用户的信息才能获取您可能想要调用的第一个 API 同步获取的项目。

但是我们不能通过await在useEffect hook中同步调用一个函数

有解决办法。请在其中定义 async 函数和运行 2 API 获取函数。

这里是钩子代码

  useEffect(() => {
    const asyncFunc = async () => {
      const res = await axios.get("http://localhost:5000/user", {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      });
      setUser(res.data);

      axios.get(`http://localhost:5000/projects`,{
        headers:{
          username:res.data.login,
        }
      }).then((response)=>{
        setProjects(response.data)
      });
    }
    asyncFunc();
  }, []);

在收到第一个 api 的响应后向另一个 api 发出请求

Making a request to another api after the response from the first api I get

javascript

async-await

reactjs

axios

选项 1

选项 2