如何在React組件中優(yōu)雅地管理多個API請求的狀態(tài)和錯誤處理

在React組件中管理多個API請求的狀態(tài)和錯誤處理可以通過使用React Hooks和Context API來實現(xiàn)。以下是一個簡單的示例，演示如何在一個React組件中管理兩個API請求的狀態(tài)和錯誤處理：

import React, { useState, useEffect } from 'react';

const MyComponent = () => {
  const [data1, setData1] = useState(null);
  const [loading1, setLoading1] = useState(true);
  const [error1, setError1] = useState(null);

  const [data2, setData2] = useState(null);
  const [loading2, setLoading2] = useState(true);
  const [error2, setError2] = useState(null);

  useEffect(() => {
    const fetchData1 = async () => {
      try {
        const response = await fetch('api_endpoint_1');
        const result = await response.json();
        setData1(result);
      } catch (error) {
        setError1(error);
      } finally {
        setLoading1(false);
      }
    };

    const fetchData2 = async () => {
      try {
        const response = await fetch('api_endpoint_2');
        const result = await response.json();
        setData2(result);
      } catch (error) {
        setError2(error);
      } finally {
        setLoading2(false);
      }
    };

    fetchData1();
    fetchData2();
  }, []);

  if (loading1 || loading2) {
    return <p>Loading...</p>;
  }

  if (error1 || error2) {
    return <p>Error: {error1 || error2}</p>;
  }

  return (
    <div>
      <h1>Data from API 1: {data1}</h1>
      <h1>Data from API 2: {data2}</h1>
    </div>
  );
};

export default MyComponent;

在上面的示例中，我們使用了useState來管理數(shù)據(jù)、加載狀態(tài)和錯誤狀態(tài)。然后使用useEffect來觸發(fā)API請求，并根據(jù)請求狀態(tài)和錯誤狀態(tài)來動態(tài)渲染組件的內(nèi)容。最后，我們通過條件判斷來展示加載狀態(tài)和錯誤狀態(tài)的信息。

這只是一個簡單的示例，實際應(yīng)用中可能會有更復(fù)雜的情況，例如同時發(fā)起多個并行請求、處理請求參數(shù)等。但是基本思路是一樣的，即使用React Hooks和Context API來管理多個API請求的狀態(tài)和錯誤處理，以保持代碼的可讀性和可維護性。