快捷導(dǎo)航

react:swr接口緩存案例代碼

更新時間：2023年11月10日 11:17:55 作者：小強有個dream

useSWR 是一個 React Hooks,是 HTTP 緩存庫 SWR 的核心方法之一,SWR 是一個輕量級的 React Hooks 庫,通過自動緩存數(shù)據(jù)來實現(xiàn) React 的數(shù)據(jù)獲取,本文給大家介紹react:swr接口緩存案例詳解,感興趣的朋友一起看看吧

useSWR 是一個 React Hooks，是 HTTP 緩存庫 SWR 的核心方法之一。SWR 是一個輕量級的 React Hooks 庫，通過自動緩存數(shù)據(jù)來實現(xiàn) React 的數(shù)據(jù)獲取。
第一個參數(shù)是被緩存的數(shù)據(jù)的 key，
第二個參數(shù)是一個函數(shù)，該函數(shù)返回數(shù)據(jù)或者一個 Promise
第三個參數(shù)是一個配置對象，它允許我們對 useSWR 請求的行為進(jìn)行一些自定義設(shè)置，參數(shù)如下

revalidateOnFocus - 如果設(shè)置為 true，窗口焦點切換到此頁面時將自動重新驗證數(shù)據(jù)。
revalidateOnReconnect - 如果設(shè)置為 true，每次從離線到在線時將自動重新驗證數(shù)據(jù)。
revalidateOnMount - 如果設(shè)置為 true，每次組件掛載時都會自動重新驗證數(shù)據(jù)。
refreshWhenHidden - 如果設(shè)置為 true，在文檔不可見時還是會自動重新驗證數(shù)據(jù)。
refreshWhenOffline - 如果設(shè)置為 true，即使 offline，也會自動重新驗證數(shù)據(jù)。
suspense - 如果設(shè)置為 true，在重新驗證數(shù)據(jù)之前將顯示占位符內(nèi)容來保持組件渲染的持續(xù)性。
errorRetryCount - 它是重試次數(shù)，默認(rèn)值為 3，當(dāng)數(shù)據(jù)驗證失敗時，它將嘗試重新驗證數(shù)據(jù)的次數(shù)。
errorRetryInterval - 毫秒數(shù)，當(dāng)數(shù)據(jù)驗證失敗后重試的間隔時間。默認(rèn)值為 5 秒。
dedupingInterval - 重復(fù)驗證響應(yīng)的緩存時間，以毫秒為單位。
focusThrottleInterval - 切換頁面焦點之后，重試時間的等待時間。
loadingTimeout - 最長等待請求的毫秒數(shù)，超時會顯示加載錯誤消息。

import useSWR from 'swr'
const apiUrl = `/api/users/${userId}`
  const { data, error } = useSWR(apiUrl)

import useSWRImmutable from ‘swr/immutable’
useSWRImmutable 是一個 React Hooks，它是從 swr/immutable 庫中導(dǎo)入的。它可以在緩存過期之前重新使用數(shù)據(jù)，以避免從服務(wù)器讀取數(shù)據(jù)的時間和網(wǎng)絡(luò)成本，幫助提高應(yīng)用程序的性能和用戶體驗。
useSWRImmutable 并不是同步調(diào)用的。它是一個異步 Hook，在使用 useSWRImmutable 時，當(dāng)我們作出數(shù)據(jù)請求時，它將使用本地緩存提供此數(shù)據(jù)。如果數(shù)據(jù)不存在于本地緩存中，則發(fā)起異步 API 請求，然后將結(jié)果存儲在緩存中。下一次嘗試獲取這個數(shù)據(jù)的時候，useSWRImmutable 只需返回本地緩存中的數(shù)據(jù)。

import useSWRImmutable from 'swr/immutable'
// const { data, error } = useSWRImmutable(key, fetcher, options)
const { data: userInfo } = useSWRImmutable('userInfoConfig', getUserconfig, {})

import useSWRMutation from ‘swr/mutation’
useSWRMutation提供了簡單且強大的方式來管理數(shù)據(jù)的更新和提交，從而讓我們輕松地構(gòu)建出 CRUD 應(yīng)用程序。useSWRMutation Hook 可以幫助我們輕松地使用 REST API 進(jìn)行數(shù)據(jù)更新、提交和創(chuàng)建。與傳統(tǒng)的 useEffect 和 useState 結(jié)合使用方式不同，它可以處理HTTP請求的生命周期管理，并且還能自動更新緩存并在成功或失敗時提供API響應(yīng)。

const { trigger: cancleTrigger } = useSWRMutation('canleBuild', cancleBuild) as any
cancleTrigger(obj).then(res => {
   if (res.code === '0') {
     notification.success({
       message: '提示',
       description: '取消構(gòu)建成功',
     })
     M({ ...appBuildparamsInfo, jobName })
   }
 })

import { useSWRConfig } from ‘swr’
useSWRConfig 是一個 React Hook，可以讓我們輕松地配置和管理 useSWR Hook 的全局配置。假設(shè)我們要在所有使用 useSWR 的組件中統(tǒng)一配置 API 的緩存時間和錯誤重試次數(shù)，我們可以使用 useSWRConfig 來實現(xiàn)：

import { SWRConfig } from 'swr'
const { cache, mutate } = useSWRConfig({
    provider: () => new Map(),
    shouldRetryOnError: false,
    revalidateOnFocus: true,
    dedupingInterval: 10000,
    errorRetryInterval: 5000,
    errorRetryCount: 3
  })

到此這篇關(guān)于react:swr接口緩存的文章就介紹到這了,更多相關(guān)react:swr接口緩存內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: