快捷導(dǎo)航

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

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

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

demo搭建

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

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

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

你覺(jué)得行嗎？看起來(lái)好像沒(méi)什么問(wèn)題，每個(gè)60s使count+1然后顯示在界面上沒(méi)毛病??？

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

動(dòng)畫(huà).gif

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

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

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

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

那么回到定時(shí)器中繼續(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計(jì)數(shù)器: {count}</div>
    </>
  );
};

動(dòng)畫(huà).gif

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

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

線(xiàn)上書(shū)寫(xiě)：

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

function ApiRefresh() {
  // 初始化為null，避免渲染時(shí)出現(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>; 
}

在組件加載完成后，通過(guò)setInterval定時(shí)刷新接口數(shù)據(jù)

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

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

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

您可能感興趣的文章: