在另一个axios请求中使用axios响应数据

Question

我正在使用axios获取信息，并且我需要在不同axios响应的另一个处理程序中获取该信息。我似乎无法在第二个响应处理中使用第一个响应中加载的数据。

例如：

const [firstData, setFirstData] = useState({});
const [secondData, setSecondData] = useState({});

await axios.get("url/firstRoute").then((response) => {
    setFirstData(response.data);
}).then(async () => {
    await axios.get("url/secondRoute").then((response) => {
        setSecondData(firstData); // firstData is still an empty Object here for some reason
    })
});

当我在第二个请求中时，如何确保firstData不为空？我还尝试使用firstData的useEffect钩子，并在其中调用第二个axios请求，但仍然得到firstData为空的相同结果。(假设两个请求都返回数据)

Answer 1

您可以像这样从第一个.then返回值：

await axios
  .get('url/firstRoute')
  .then((response) => {
    setFirstData(response.data);
    return response.data;
  })
  .then(async (firstData) => {
    await axios.get('url/secondRoute').then((response) => {
      setSecondData(firstData); // firstData is still an empty Object here for some reason
    });
  });

在您的代码中，您正在设置state，但在then子句之前没有这样做。