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 stringfetcher
:(可选)一个请求数据的 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;
比如,只想使用swr实现一个简单的实时获取服务器最新数据的功能,可以直接设置refreshInterval参数,设置一个获取刷新数据的间隔时间,这样子客户端代码就会轮询的方式进行接口的调用。
当我们的页面重新聚焦或者标签页切换的时候会自动的获取最新的数据,也就是说只要用户返回打开了我们的项目,那么使用了swr包装的网络请求,都会尽心再一次的数据获取,保证页面以最新的数据展示。
参数传递
在调用fetcher的时候如果要传递多个参数,可以使用数组的形式进行传递。
// 默认情况下,key 将作为参数传递给 fetcher
useSWR('/api/user', () => fetcher('/api/user'))
useSWR('/api/user', url => fetcher(url))
useSWR('/api/user', fetcher)
如果需要传递多个参数,那么参数使用数组的形式进行组织,比如:
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);...
};
...
重新验证数据
swr中的mutate方法可以通过指定可以的形式,触发所有相同key的请求进行数据校验,更新最新值。比如
import useSWR, { mutate } from 'swr'
...
const SwrDemo = () => {const { data, error } = useSWR('/api/pets', fetcher);...<button onClick={()=>mutate('/api/pets')}>手动更新</button>
};
...
更改数据
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><buttononClick={() => {// 点击添加的时候使用改变当前key对应的缓存数据的方法,只对本地数据做修改// 当前所做的修改是没有结合api接口的,所以此处不做服务器端校验// 参数二传递falsemutate([...data, { _id: Date.now(), name: '小明' + Math.random() }],false);}}>添加</button><hr />{data.length} <hr /><button onClick={() => M('/api/pets')}>手动更新</button></div>);
};export default SwrDemo;
此例子演示的效果是数据在本地做缓存更改,手动更新按钮点击之后会重新和服务器的数据做比对,获取服务器最新的数据进行显示。如果需要更新服务器的数据,可以结合api接口发送对应的请求实现
总结
SWR是一个神奇的插件,使用它可以为我们的项目带来更好的体验。这里只是列出来了一些常用的方法,如果想了解更多,可以看下官方文档中的更多说明。
*陆荣涛前端学习交流Q群858752519
加群备注:CSDN推荐
React中使用SWR处理数据请求相关推荐
- SWR 用于数据请求的 React Hooks 库
SWR 用于数据请求的 React Hooks 库 "SWR" 这个名字来自于 stale-while-revalidate:一种由 HTTP RFC 5861 推广的 HTTP ...
- (POST请求中的三种数据请求格式.application/x-www-form-urlencoded和multipart/form-data和application/json)
(POST请求中的三种数据请求格式.application/x-www-form-urlencoded和multipart/form-data和application/json) applicatio ...
- React中使用superagent的get请求
写在前面 这个真三分钟就可以上手系列.原来用过axios,但是有项目需要用这个,发现superagent的用法是真的很简单,参考博客: https://www.jianshu.com/p/72691e ...
- 在React中获取数据
React初学者经常从不需要获取数据的应用开始.他们经常面临一个计数器,任务列表获取井字棋游戏应用.这是很好的,因为在开始学习React的时候,数据获取在你的应用中添加了另一层复杂度. 然而,有些时候 ...
- React中的dav.js脚手架
文章目录 安装 dva-cli 创建新应用 Dav目录 使用 antd 定义路由 编写 UI Component 定义 Model connect 连接 Model 和 Route 页面下的数据 安装 ...
- antd中table组件中如何进行换行操作(react中)
antd中table组件中如何进行换行操作(react中) 说明 效果 数据 代码 说明 react项目,遇到某字段对应的单元格内需要换行. 最初想偷懒,尝试了在数据中加入回车.使用模板字符串.转义字 ...
- 讲讲React中的State和Props
基本概念 在React中,组件的数据存储在props和state中. 一个组件的显示形态可以由数据状态和外部参数所决定. 外部参数--props 组件从概念上可以理解为一个函数,因为函数也是封装一个独 ...
- SWR:最具潜力的 React Hooks 数据请求库
原文链接:https://zhuanlan.zhihu.com/p/89570321 作者:飞冰-chenbin92 说明:本文内容主要来源于 SWR 的 官方文档 以及 GitHub zeit/sw ...
- React基础-React中发送Ajax请求以及Mock数据
前言 在 React 中, render 函数返回的结果,取决于组件的 props 和 state 我们都知道 UI 页面上的数据不是写死的,往往是从后端的数据接口中拿到的 然后将真实的数据填充到页面 ...
最新文章
- 首发|机器学习未来十年:你需要把握的趋势和热点
- 【转载】eclipse常用插件在线安装地址或下载地址
- 多项式全家桶学习笔记【持续更新】
- 【开源】Tsar——灵活的系统和应用采集软件
- linuxcnc 多轴联动_科学网—【LinuxCNC】开源机床Linux操作系统 - 刘洋的博文
- 树莓派安装系统并设置中文界面
- python 装饰器原理_python3 property装饰器实现原理与用法示例
- Servlet文件下载
- 改变php默认目录结构,ThinkPHP中自定义目录结构的设置方法_PHP
- 2018注册测绘师各地报名时间和注意事项!莫错过哦!
- 第十四届恩智浦智能汽车大赛车队规划概要
- 计算机毕业设计、实战项目之 [含论文+答辩PPT+任务书+中期检查表+源码等]基于S2SH的医院在线挂号[包运行成功]
- 以收音机为例总结分析硬件电路的三个步骤
- 解决龙芯2F使用oprofile-0.9.7无法采样应用程序函数的问题
- 如何配置百度地图应用访问白名单
- Java实现 LeetCode 717 1比特与2比特字符(暴力)
- java8之localDateTime, ZoneId, Instant使用
- 【CSPJ】CSPJ小学组
- 吴军《罗曼·罗兰 | 年轻时为什么需要理想主义?》
- nobody 歌曲MV