在做React項(xiàng)目開(kāi)發(fā)的時(shí)候，我們一般都會(huì)直接使用axios插件或者fetch進(jìn)行數(shù)據(jù)的獲取。但是這一次給大家介紹一個(gè)插件庫(kù)SWR，算是網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求的一個(gè)補(bǔ)充吧。

　　先上官網(wǎng)地址：[https://swr.vercel.app/zh-CN](https://link.zhihu.com/?target=https%3A//swr.vercel.app/zh-CN)

　　### SWR

　　SWR是一個(gè)用于數(shù)據(jù)請(qǐng)求的React Hooks庫(kù)，使用SWR組件可以實(shí)時(shí)的獲取服務(wù)器最新的數(shù)據(jù)。借用官方的說(shuō)明：“SWR” 這個(gè)名字來(lái)自于 `stale-while-revalidate`：一種由 [HTTP RFC 5861](https://link.zhihu.com/?target=https%3A//tools.ietf.org/html/rfc5861) 推廣的 HTTP 緩存失效策略。這種策略首先從緩存中返回?cái)?shù)據(jù)(過(guò)期的)，同時(shí)發(fā)送 fetch 請(qǐng)求(重新驗(yàn)證)，最后得到最新數(shù)據(jù)。

　　當(dāng)我們重新聚焦一個(gè)頁(yè)面或在標(biāo)簽頁(yè)之間切換時(shí)重新獲取最新的數(shù)據(jù)，或者也可以自行設(shè)置一個(gè)獲取數(shù)據(jù)的時(shí)間間隔(refreshInterval)。

　　### 安裝

　　```bash

　　npm i swr

　　# or

　　yarn add swr

　　```

　　使用npm或者yarn在react項(xiàng)目中安裝swr插件。

　　### 使用

　　```js

　　const { data, error, isValidating, mutate } = useSWR(key, fetcher, options)

　　```

　　### 參數(shù)

　　- `key`: 請(qǐng)求的唯一 key string

　　- `fetcher`:(*可選*)一個(gè)請(qǐng)求數(shù)據(jù)的 Promise 返回函數(shù)

　　- `options`:(*可選*)該 SWR hook 的選項(xiàng)對(duì)象

　　### 返回值

　　- `data`: 通過(guò) `fetcher` 用給定的 key 獲取的數(shù)據(jù)(如未完全加載，返回 undefined)

　　- `error`: `fetcher` 拋出的錯(cuò)誤(或者是 undefined)

　　- `isValidating`: 是否有請(qǐng)求或重新驗(yàn)證加載

　　- `mutate(data?, shouldRevalidate?)`: 更改緩存數(shù)據(jù)的函數(shù)

　　data表示數(shù)據(jù)，可以修改緩存的數(shù)據(jù)，一般在數(shù)據(jù)改變的時(shí)候使用，可以結(jié)合post請(qǐng)求操作

　　是否需要和服務(wù)器上的數(shù)據(jù)進(jìn)行比對(duì)校驗(yàn)

　　### 選項(xiàng)

　　- `revalidateOnFocus = true`: 窗口聚焦時(shí)自動(dòng)重新驗(yàn)證

　　- `refreshInterval = 0`: 輪詢間隔 (默認(rèn) disabled)

　　在使用時(shí)，我只列出了最常用的一些配置信息。其他的可以參考官方文檔

　　文檔地址：[https://swr.vercel.app/zh-CN/docs/options](https://link.zhihu.com/?target=https%3A//swr.vercel.app/zh-CN/docs/options)

　　### 舉個(gè)例子

　　```js

　　import React from 'react';

　　import useSWR from 'swr';

　　const fetcher = (url) => fetch(url).then((res) => res.json());

　　const SwrDemo = () => {

　　const { data, error } = useSWR('/api/pets', fetcher);

　　// console.log(error);

　　if (error) return

;

　　if (!data) return

;

　　return

;

　　};

　　export default SwrDemo;

　　```

　　比如，只想使用swr實(shí)現(xiàn)一個(gè)簡(jiǎn)單的實(shí)時(shí)獲取服務(wù)器最新數(shù)據(jù)的功能，可以直接設(shè)置refreshInterval參數(shù)，設(shè)置一個(gè)獲取刷新數(shù)據(jù)的間隔時(shí)間，這樣子客戶端代碼就會(huì)輪詢的方式進(jìn)行接口的調(diào)用。

　　當(dāng)我們的頁(yè)面重新聚焦或者標(biāo)簽頁(yè)切換的時(shí)候會(huì)自動(dòng)的獲取最新的數(shù)據(jù)，也就是說(shuō)只要用戶返回打開(kāi)了我們的項(xiàng)目，那么使用了swr包裝的網(wǎng)絡(luò)請(qǐng)求，都會(huì)盡心再一次的數(shù)據(jù)獲取，保證頁(yè)面以最新的數(shù)據(jù)展示。

　　### 參數(shù)傳遞

　　在調(diào)用fetcher的時(shí)候如果要傳遞多個(gè)參數(shù)，可以使用數(shù)組的形式進(jìn)行傳遞。

　　```js

　　// 默認(rèn)情況下，key 將作為參數(shù)傳遞給 fetcher

　　useSWR('/api/user', () => fetcher('/api/user'))

　　useSWR('/api/user', url => fetcher(url))

　　useSWR('/api/user', fetcher)

　　```

　　如果需要傳遞多個(gè)參數(shù)，那么參數(shù)使用數(shù)組的形式進(jìn)行組織，比如：

　　```js

　　const fetcher = (url, id) => {

　　console.log(url, id);

　　return fetch(url).then((res) => res.json());

　　};

　　const SwrDemo = () => {

　　const { data, error } = useSWR(['/api/pets', 111], fetcher);

　　...

　　};

　　...

　　```

　　### 重新驗(yàn)證數(shù)據(jù)

　　swr中的mutate方法可以通過(guò)指定可以的形式，觸發(fā)所有相同key的請(qǐng)求進(jìn)行數(shù)據(jù)校驗(yàn)，更新最新值。比如

　　```text

　　import useSWR, { mutate } from 'swr'

　　...

　　const SwrDemo = () => {

　　const { data, error } = useSWR('/api/pets', fetcher);

　　...

　　mutate('/api/pets')}>手動(dòng)更新

　　};

　　...

　　```

　　### 更改數(shù)據(jù)

　　```text

　　import React from 'react';

　　import useSWR, { mutate as M } from 'swr';

　　const fetcher = (url) => {

　　return fetch(url).then((res) => res.json());

　　};

　　const SwrDemo = () => {

　　const { data, error, mutate } = useSWR('/api/pets', fetcher);

　　if (error) return

;

　　if (!data) return

;

　　console.log(data);

　　return (

　　);

　　};

　　export default SwrDemo;

　　```

　　此例子演示的效果是數(shù)據(jù)在本地做緩存更改，手動(dòng)更新按鈕點(diǎn)擊之后會(huì)重新和服務(wù)器的數(shù)據(jù)做比對(duì)，獲取服務(wù)器最新的數(shù)據(jù)進(jìn)行顯示。如果需要更新服務(wù)器的數(shù)據(jù)，可以結(jié)合api接口發(fā)送對(duì)應(yīng)的請(qǐng)求實(shí)現(xiàn)

　　### 總結(jié)

　　SWR是一個(gè)神奇的插件，使用它可以為我們的項(xiàng)目帶來(lái)更好的體驗(yàn)。這里只是列出來(lái)了一些常用的方法，如果想了解更多，可以看下官方文檔中的更多說(shuō)明。更多關(guān)于“html5培訓(xùn)”的問(wèn)題，歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓(xùn)經(jīng)驗(yàn)，課程大綱更科學(xué)更專業(yè)，有針對(duì)零基礎(chǔ)的就業(yè)班，有針對(duì)想提升技術(shù)的提升班，高品質(zhì)課程助理你實(shí)現(xiàn)夢(mèng)想。