如何根據第一個響應進行第二個API調用？

Question

我需要調用2個API來在組件上顯示數據，但是第二個api需要第一個API的響應中的標頭。 我正在使用React Hooks。 我從第一個響應中更新狀態，以便以后可以在第二個調用中使用它，但是它不確定。 我究竟做錯了什么？

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

Answer 1

您可以將結果鏈接為常規承諾： 參考

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

Answer 2

在.the內進行第二個調用，然后鏈接到第一個諾言鏈的末尾...簡單來說，就是將您的諾言鏈接起來

就像是

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

Answer 3

您可以這樣寫：

  useEffect(() => {
      return axios
        .get(`firstUrl`)
        .then(response => {
          return response.data.result.field
        }).then(result => { 
         return axios.get(`url${result}`)
        });
   });

與異步/等待：

  useEffect(async () => {
      const result1 = await axios
        .get(`firstUrl`)
        .then(response => {
          return response.data.result.field
        });
      const result2 = await axios.get(`url${result1}`)
      return result2 
   });

Answer 4

查詢result1和result2看起來是順序的，但同時存在。 換句話說， result2在執行之前不會等待result1完成。

這是一個使用async / await鏈接諾言的工作示例：

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

Answer 5

您可以使用async/await緩解混亂。

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