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

　　先上官網地址：[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組件可以實時的獲取服務器最新的數(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ù)。

　　當我們重新聚焦一個頁面或在標簽頁之間切換時重新獲取最新的數(shù)據(jù)，或者也可以自行設置一個獲取數(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ù)改變的時候使用，可以結合post請求操作

　　是否需要和服務器上的數(shù)據(jù)進行比對校驗

　　### 選項

　　- `revalidateOnFocus = true`: 窗口聚焦時自動重新驗證

　　- `refreshInterval = 0`: 輪詢間隔 (默認 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)一個簡單的實時獲取服務器最新數(shù)據(jù)的功能，可以直接設置refreshInterval參數(shù)，設置一個獲取刷新數(shù)據(jù)的間隔時間，這樣子客戶端代碼就會輪詢的方式進行接口的調用。

　　當我們的頁面重新聚焦或者標簽頁切換的時候會自動的獲取最新的數(shù)據(jù)，也就是說只要用戶返回打開了我們的項目，那么使用了swr包裝的網絡請求，都會盡心再一次的數(shù)據(jù)獲取，保證頁面以最新的數(shù)據(jù)展示。

　　### 參數(shù)傳遞

　　在調用fetcher的時候如果要傳遞多個參數(shù)，可以使用數(shù)組的形式進行傳遞。

　　```js

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

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

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

　　useSWR('/api/user', fetcher)

　　```

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

　　```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的請求進行數(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ù)在本地做緩存更改，手動更新按鈕點擊之后會重新和服務器的數(shù)據(jù)做比對，獲取服務器最新的數(shù)據(jù)進行顯示。如果需要更新服務器的數(shù)據(jù)，可以結合api接口發(fā)送對應的請求實現(xiàn)

　　### 總結

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