react實現每隔60s刷新一次接口的示例代碼

更新時間：2023年06月02日 16:11:22 作者：霍格沃茨魔法師

本文主要介紹了react實現每隔60s刷新一次接口的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

demo搭建

假如說，我想實現的就是每60s就改變一下count，使其+1。

且只掛載一次頁面還要實現60s更新，那么如果我這么寫呢？

const [count, setCount] = useState(0);
useEffect(() => {
  const interval = setInterval(() => {
  console.log(count)
    setCount(count+1)
  }, 60000);
    return () => clearInterval(interval);
},[])
  return (
       <>
          <div>count計數器: {count}</div>
       </>
);

你覺得行嗎？看起來好像沒什么問題，每個60s使count+1然后顯示在界面上沒毛病??？

你自己看！(甄嬛傳滴血驗親語氣)

動畫.gif

它在dom中顯示的count已經被掛載+1，而鉤子函數中的count打印出的始終為0，不會進行+1的操作。

那我怎么實現更新數據??？？

我想到的是通過賦值ref.current來存儲數據的更新，于是定義了一個鉤子函數將原來的count就掛載到ref.current中，此后的每次更新都在ref的基礎上，那么看下書寫倒是很簡單了。

export const useLatestValue = (value) => {
  const ref = useRef(value);
  ref.current = value;
  return ref;
};
只需要將count入參useLatestValue(count)即可開啟ref掛載之路。

那么回到定時器中繼續(xù)補全：

export default () => {
  const [count, setCount] = useState(0);
  const ref = useLatestValue(count);
  useEffect(() => {
    const interval = setInterval(() => {
      console.log("count:", count);
      setCount(ref.current + 1);
    }, 60000);
    return () => clearInterval(interval);
  }, []);
  return (
    <>
      <div>count計數器: {count}</div>
    </>
  );
};

動畫.gif

另外也可以把自定義鉤子函數的入參進行ts類型約束，由于該鉤子函數可能會作為一個公共函數來使用，所以無論入參為什么形式，都需要保證出參都是相同的類型，那么這種情況就用到了泛型。

    export const useLatestValue = <T>(value：T):{current:T} => {
      const ref = useRef(value);
      ref.current = value;
      return ref;
    };

線上書寫：

原始實現方法：直接在定時器中請求接口：

function ApiRefresh() {
  // 初始化為null，避免渲染時出現undefined的情況
  const [apiResponse, setApiResponse] = useState<ApiResponse | null>(null); 
  const [loading, setLoading] = useState(false); // 控制loading狀態(tài)
    // 顯示接口返回值的姓名，如果為空則顯示Loading...
  return <div>{apiResponse ? apiResponse.name : "Loading..."}</div>; 
}

在組件加載完成后，通過setInterval定時刷新接口數據

interface ApiResponse {
  // 假設接口返回的是一個包含name和age字段的對象
  name: string;
  age: number;
}
function ApiRefresh() {
  const [apiResponse, setApiResponse] = useState<ApiResponse | null>(null);
  const [loading, setLoading] = useState(false);
  // 在組件加載完成后，每隔60s刷新一次接口
  useEffect(() => {
    setLoading(true); // 刷新時，顯示loading狀態(tài)
    const timer = setInterval(() => {
      axios.get<ApiResponse>("https://example.com/api").then(response => {
        setApiResponse(response.data);
        setLoading(false); // 刷新完成后，隱藏loading狀態(tài)
      });
    }, 60000);
    // 組件卸載時，清除定時器
    return () => clearInterval(timer);
  }, []);
  return <div>{apiResponse ? apiResponse.name : (loading ? "Loading..." : "")}</div>;
}

在上面的代碼中，我們使用useEffect鉤子來監(jiān)聽組件的創(chuàng)建和銷毀，然后在組件創(chuàng)建時初始化定時器，使用setInterval函數每隔60s發(fā)送一次請求并更新狀態(tài)，而在組件銷毀時則清除定時器，避免不必要的網絡請求。同時，我們也處理了接口數據的加載狀態(tài)，避免用戶等待時看到空白界面。

到此這篇關于react實現每隔60s刷新一次接口的示例代碼的文章就介紹到這了,更多相關react刷新接口內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: