在做React項目開發(fā)的時候，我們一般都會直接使用axios插件或者fetch進(jìn)行數(shù)據(jù)的獲取。但是這一次給大家介紹一個插件庫SWR，算是網(wǎng)絡(luò)數(shù)據(jù)請求的一個補(bǔ)充吧。
先上官網(wǎng)地址：[https://swr.vercel.app/zh-CN](https://link.zhihu.com/?target=https%3A//swr.vercel.app/zh-CN)
### SWR
SWR是一個用于數(shù)據(jù)請求的React Hooks庫，使用SWR組件可以實時的獲取服務(wù)器最新的數(shù)據(jù)。借用官方的說明：“SWR” 這個名字來自于 `stale-while-revalidate`：一種由 [HTTP RFC 5861](https://link.zhihu.com/?target=https%3A//tools.ietf.org/html/rfc5861) 推廣的 HTTP 緩存失效策略。這種策略首先從緩存中返回數(shù)據(jù)(過期的)，同時發(fā)送 fetch 請求(重新驗證)，最后得到最新數(shù)據(jù)。
當(dāng)我們重新聚焦一個頁面或在標(biāo)簽頁之間切換時重新獲取最新的數(shù)據(jù)，或者也可以自行設(shè)置一個獲取數(shù)據(jù)的時間間隔(refreshInterval)。
### 安裝
```bash
npm i swr
# or
yarn add swr
```
使用npm或者yarn在react項目中安裝swr插件。
### 使用
```js
const { data, error, isValidating, mutate } = useSWR(key, fetcher, options)
```
### 參數(shù)
- `key`: 請求的唯一 key string
- `fetcher`:(*可選*)一個請求數(shù)據(jù)的 Promise 返回函數(shù)
- `options`:(*可選*)該 SWR hook 的選項對象
### 返回值
- `data`: 通過 `fetcher` 用給定的 key 獲取的數(shù)據(jù)(如未完全加載，返回 undefined)
- `error`: `fetcher` 拋出的錯誤(或者是 undefined)
- `isValidating`: 是否有請求或重新驗證加載
- `mutate(data?, shouldRevalidate?)`: 更改緩存數(shù)據(jù)的函數(shù)
data表示數(shù)據(jù)，可以修改緩存的數(shù)據(jù)，一般在數(shù)據(jù)改變的時候使用，可以結(jié)合post請求操作
是否需要和服務(wù)器上的數(shù)據(jù)進(jìn)行比對校驗
### 選項
- `revalidateOnFocus = true`: 窗口聚焦時自動重新驗證
- `refreshInterval = 0`: 輪詢間隔 (默認(rèn) disabled)
在使用時，我只列出了最常用的一些配置信息。其他的可以參考官方文檔
文檔地址：[https://swr.vercel.app/zh-CN/docs/options](https://link.zhihu.com/?target=https%3A//swr.vercel.app/zh-CN/docs/options)
### 舉個例子
```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實現(xiàn)一個簡單的實時獲取服務(wù)器最新數(shù)據(jù)的功能，可以直接設(shè)置refreshInterval參數(shù)，設(shè)置一個獲取刷新數(shù)據(jù)的間隔時間，這樣子客戶端代碼就會輪詢的方式進(jìn)行接口的調(diào)用。
當(dāng)我們的頁面重新聚焦或者標(biāo)簽頁切換的時候會自動的獲取最新的數(shù)據(jù)，也就是說只要用戶返回打開了我們的項目，那么使用了swr包裝的網(wǎng)絡(luò)請求，都會盡心再一次的數(shù)據(jù)獲取，保證頁面以最新的數(shù)據(jù)展示。
### 參數(shù)傳遞
在調(diào)用fetcher的時候如果要傳遞多個參數(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)
```
如果需要傳遞多個參數(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);
...
};
...
```
### 重新驗證數(shù)據(jù)
swr中的mutate方法可以通過指定可以的形式，觸發(fā)所有相同key的請求進(jìn)行數(shù)據(jù)校驗，更新最新值。比如
```text
import useSWR, { mutate } from 'swr'
...
const SwrDemo = () => {
const { data, error } = useSWR('/api/pets', fetcher);
...
};
...
```
### 更改數(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 (
{data.map((item) => (
- {item.name}
))}
<button< p="">
onClick={() => {
// 點擊添加的時候使用改變當(dāng)前key對應(yīng)的緩存數(shù)據(jù)的方法，只對本地數(shù)據(jù)做修改
// 當(dāng)前所做的修改是沒有結(jié)合api接口的，所以此處不做服務(wù)器端校驗
// 參數(shù)二傳遞false
mutate(
[...data, { _id: Date.now(), name: '小明' + Math.random() }],
false
);
}}
>
添加
{data.length}
);
};
export default SwrDemo;
```
此例子演示的效果是數(shù)據(jù)在本地做緩存更改，手動更新按鈕點擊之后會重新和服務(wù)器的數(shù)據(jù)做比對，獲取服務(wù)器最新的數(shù)據(jù)進(jìn)行顯示。如果需要更新服務(wù)器的數(shù)據(jù)，可以結(jié)合api接口發(fā)送對應(yīng)的請求實現(xiàn)
### 總結(jié)
SWR是一個神奇的插件，使用它可以為我們的項目帶來更好的體驗。這里只是列出來了一些常用的方法，如果想了解更多，可以看下官方文檔中的更多說明。更多關(guān)于“html5培訓(xùn)”的問題，歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓(xùn)經(jīng)驗，課程大綱更科學(xué)更專業(yè)，有針對零基礎(chǔ)的就業(yè)班，有針對想提升技術(shù)的提升班，高品質(zhì)課程助理你實現(xiàn)夢想。
京公網(wǎng)安備 11010802030320號