快捷導(dǎo)航

react實現(xiàn)每隔60s刷新一次接口的示例代碼

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

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

demo搭建

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

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

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

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

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

動畫.gif

它在dom中顯示的count已經(jīng)被掛載+1，而鉤子函數(shù)中的count打印出的始終為0，不會進(jìn)行+1的操作。

那我怎么實現(xiàn)更新數(shù)據(jù)??？？

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

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

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

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計數(shù)器: {count}</div>
    </>
  );
};

動畫.gif

另外也可以把自定義鉤子函數(shù)的入?yún)⑦M(jìn)行ts類型約束，由于該鉤子函數(shù)可能會作為一個公共函數(shù)來使用，所以無論入?yún)槭裁葱问?，都需要保證出參都是相同的類型，那么這種情況就用到了泛型。

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

線上書寫：

原始實現(xiàn)方法：直接在定時器中請求接口：

function ApiRefresh() {
  // 初始化為null，避免渲染時出現(xiàn)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定時刷新接口數(shù)據(jù)

interface ApiResponse {
  // 假設(shè)接口返回的是一個包含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函數(shù)每隔60s發(fā)送一次請求并更新狀態(tài)，而在組件銷毀時則清除定時器，避免不必要的網(wǎng)絡(luò)請求。同時，我們也處理了接口數(shù)據(jù)的加載狀態(tài)，避免用戶等待時看到空白界面。

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

您可能感興趣的文章: