React中使用SWR处理数据请求

React中使用SWR处理数据请求

在做React项目开发的时候，我们一般都会直接使用axios插件或者fetch进行数据的获取。但是这一次给大家介绍一个插件库SWR，算是网络数据请求的一个补充吧。

先上官网地址：https://swr.vercel.app/zh-CN

SWR

SWR是一个用于数据请求的 React Hooks 库，使用 SWR组件可以实时的获取服务器最新的数据。借用官方的说明：“SWR” 这个名字来自于 stale-while-revalidate：一种由 HTTP RFC 5861 推广的 HTTP 缓存失效策略。这种策略首先从缓存中返回数据（过期的），同时发送 fetch 请求（重新验证），最后得到最新数据。

当我们重新聚焦一个页面或在标签页之间切换时重新获取最新的数据，或者也可以自行设置一个获取数据的时间间隔(refreshInterval)。

安装

npm i swr
# or
yarn add swr

使用npm或者yarn在react项目中安装swr插件。

使用

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

参数

• key: 请求的唯一 key string
• fetcher:（可选）一个请求数据的 Promise 返回函数
• options:（可选）该 SWR hook 的选项对象

返回值

• data: 通过 fetcher 用给定的 key 获取的数据（如未完全加载，返回 undefined）
• error: fetcher 抛出的错误（或者是 undefined）
• isValidating: 是否有请求或重新验证加载
• mutate(data?, shouldRevalidate?): 更改缓存数据的函数

data表示数据，可以修改缓存的数据，一般在数据改变的时候使用，可以结合post请求操作

是否需要和服务器上的数据进行比对校验

选项

• revalidateOnFocus = true: 窗口聚焦时自动重新验证
• refreshInterval = 0: 轮询间隔 (默认 disabled)

在使用时，我只列出了最常用的一些配