快捷導(dǎo)航

react:swr接口緩存案例代碼

更新時(shí)間：2023年11月10日 11:17:55 作者：小強(qiáng)有個(gè)dream

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

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

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

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

import useSWRImmutable from ‘swr/immutable’
useSWRImmutable 是一個(gè) React Hooks，它是從 swr/immutable 庫(kù)中導(dǎo)入的。它可以在緩存過(guò)期之前重新使用數(shù)據(jù)，以避免從服務(wù)器讀取數(shù)據(jù)的時(shí)間和網(wǎng)絡(luò)成本，幫助提高應(yīng)用程序的性能和用戶(hù)體驗(yàn)。
useSWRImmutable 并不是同步調(diào)用的。它是一個(gè)異步 Hook，在使用 useSWRImmutable 時(shí)，當(dāng)我們作出數(shù)據(jù)請(qǐng)求時(shí)，它將使用本地緩存提供此數(shù)據(jù)。如果數(shù)據(jù)不存在于本地緩存中，則發(fā)起異步 API 請(qǐng)求，然后將結(jié)果存儲(chǔ)在緩存中。下一次嘗試獲取這個(gè)數(shù)據(jù)的時(shí)候，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提供了簡(jiǎn)單且強(qiáng)大的方式來(lái)管理數(shù)據(jù)的更新和提交，從而讓我們輕松地構(gòu)建出 CRUD 應(yīng)用程序。useSWRMutation Hook 可以幫助我們輕松地使用 REST API 進(jìn)行數(shù)據(jù)更新、提交和創(chuàng)建。與傳統(tǒng)的 useEffect 和 useState 結(jié)合使用方式不同，它可以處理HTTP請(qǐng)求的生命周期管理，并且還能自動(dòng)更新緩存并在成功或失敗時(shí)提供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 是一個(gè) React Hook，可以讓我們輕松地配置和管理 useSWR Hook 的全局配置。假設(shè)我們要在所有使用 useSWR 的組件中統(tǒng)一配置 API 的緩存時(shí)間和錯(cuò)誤重試次數(shù)，我們可以使用 useSWRConfig 來(lái)實(shí)現(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: