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

Question

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

Ps 一个更好的方法来做这个调用（可能使用异步/等待）会非常适用

 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();
  }, []);

原文由 Besart Marku 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

就像是

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);
    }), []);

原文由 Jaromanda X 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

原文由 PEPEGA 发布，翻译遵循 CC BY-SA 4.0 许可协议