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

　　先上官網(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);

　　...

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

　　};

　　...

　　```

　　### 更改數(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ù)在本地做緩存更改，手動更新按鈕點擊之后會重新和服務(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)夢想。