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
1
2
3

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

使用

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

参数

• 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)

在使用时，我只列出了最常用的一些配置信息。其他的可以参考官方文档

文档地址：https://swr.vercel.app/zh-CN/docs/options

举个例子

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 <div>failed to load</div>;
  if (!data) return <div>loading...</div>;
  return <div>{data.length}</div>;
};

export default SwrDemo;
1
2
3
4
5
6
7
8
9
10
11
12
13
14

比如，只想使用swr实现一个简单的实时获取服务器最新数据的功能，可以直接设置refreshInterval参数，设置一个获取刷新数据的间隔时间，这样子客户端代码就会轮询的方式进行接口的调用。

当我们的页面重新聚焦或者标签页切换的时候会自动的获取最新的数据，也就是说只要用户返回打开了我们的项目，那么使用了swr包装的网络请求，都会尽心再一次的数据获取，保证页面以最新的数据展示。

参数传递

在调用fetcher的时候如果要传递多个参数，可以使用数组的形式进行传递。

// 默认情况下，key 将作为参数传递给 fetcher
useSWR('/api/user', () => fetcher('/api/user'))
useSWR('/api/user', url => fetcher(url))
useSWR('/api/user', fetcher)
1
2
3
4

如果需要传递多个参数，那么参数使用数组的形式进行组织，比如：

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);
  ...
};
...
1
2
3
4
5
6
7
8
9

重新验证数据

swr中的mutate方法可以通过指定可以的形式，触发所有相同key的请求进行数据校验，更新最新值。比如

import useSWR, { mutate } from 'swr'
...
const SwrDemo = () => {
  const { data, error } = useSWR('/api/pets', fetcher);
  ...
  <button onClick={()=>mutate('/api/pets')}>手动更新</button>
};
...
1
2
3
4
5
6
7
8

更改数据

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 <div>failed to load</div>;
  if (!data) return <div>loading...</div>;
  console.log(data);
  return (
    <div>
      <ul>
        {data.map((item) => (
          <li key={item._id}>{item.name}</li>
        ))}
      </ul>
      <button
        onClick={() => {
          // 点击添加的时候使用改变当前key对应的缓存数据的方法，只对本地数据做修改
          //  当前所做的修改是没有结合api接口的，所以此处不做服务器端校验
          //    参数二传递false
          mutate(
            [...data, { _id: Date.now(), name: '小明' + Math.random() }],
            false
          );
        }}
      >
        添加
      </button>
      <hr />
      {data.length} <hr />
      <button onClick={() => M('/api/pets')}>手动更新</button>
    </div>
  );
};

export default SwrDemo;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

此例子演示的效果是数据在本地做缓存更改，手动更新按钮点击之后会重新和服务器的数据做比对，获取服务器最新的数据进行显示。如果需要更新服务器的数据，可以结合api接口发送对应的请求实现

总结

SWR是一个神奇的插件，使用它可以为我们的项目带来更好的体验。这里只是列出来了一些常用的方法，如果想了解更多，可以看下官方文档中的更多说明。

*陆荣涛前端学习交流Q群858752519
加群备注：CSDN推荐