如何根据第一个响应进行第二个 API 调用？

IT技术 javascript reactjs axios
2021-05-17 14:50:51

我需要调用 2 个 API 来在我的组件上显示数据，但第二个 API 需要来自第一个 API 响应的标头。我正在使用 React Hooks。我从第一个响应更新状态，以便稍后我可以在第二个调用中使用它，但它未定义。我究竟做错了什么？

Ps 执行此调用的更好方法（可能使用 async/await）将非常有用

 const [casesHeaderFields, setCasesHeaderFields] = useState([]);
 const [casesFields, setCasesFields] = useState([]);

  useEffect(() => {
    const fetchData = () => {
      const result1 = axios
        .get(`firstUrl`)
        .then(response => {
         //I need this as headers for my second API
          setCasesHeaderFields(
            response.data.result.fields
          );
        });

      const result2 = axios
        .get(`url${casesHeaderFields} //here i want to pass params from 
         //first response)
        .then(response => {
          setCasesFields(response.data.result.record_set);
        });
    };
    fetchData();
  }, []);
4个回答

您可以将结果链接起来，因为它们是常规Promise： 参考

axios.get(...)
  .then((response) => {
    return axios.get(...); // using response.data
  })
  .then((response) => {
    console.log('Response', response);
  });

在 .then 中进行第二次调用，链接到第一个Promise链的末尾......简单来说，链接你的Promise

就像是

useEffect(() => axios.get(`firstUrl`)
    .then(response => {
        setCasesHeaderFields(response.data.result.fields);
        return response.data.result.fields;
    })
    .then(casesHeaderFields => axios.get(`url${casesHeaderFields}`))
    .then(response => {
        setCasesFields(response.data.result.record_set);
    }), []);

你可以async/await用来缓解混乱。

useEffect(async () => {
    const response = await axios.get(`firstUrl`)
    const result = await axios.get(`url${response.data.result.fields}`)
    console.log(result.data)
})

查询result1和result2看起来是顺序的，但同时存在。换句话说，在执行之前result2不等待result1完成。

这是一个使用 async/await 链接 promise 的工作示例：

useEffect(async () => {
  try {
    // Make a first request
    const result1 = await axios.get(`firstUrl`);
    setCasesHeaderFields(result1.data.result.fields);

    // Use resutlt in the second request
    const result2 = await axios.get(`url${"some params from result1"}`);
    setCasesFields(result2.data.result.record_set);
  } catch (e) {
    // Handle error here
  }
}, []);

编辑

根据评论，这是在控制台中不发出警告的情况下将异步与 useEffect 一起使用的最佳方法：

useEffect(() => {
  const fetchData = async () => {
    try {
      // Make a first request
      const result1 = await axios.get(`firstUrl`);
      setCasesHeaderFields(result1.data.result.fields);

      // Use resutlt in the second request
      const result2 = await axios.get(`url${casesHeaderFields}`);
      setCasesFields(result2.data.result.record_set);
    } catch (e) {
      // Handle error here
    }
  };

  fetchData();
}, []);
其它你可能感兴趣的问题
上一篇挤压下的 Slic3r 下一篇校准 HE3D Prusa XI3 的初学者