react:swr接口缓存

useSWR 是一个 React Hooks,是 HTTP 缓存库 SWR 的核心方法之一。SWR 是一个轻量级的 React Hooks 库,通过自动缓存数据来实现 React 的数据获取。
第一个参数是被缓存的数据的 key,
第二个参数是一个函数,该函数返回数据或者一个 Promise
第三个参数是一个配置对象,它允许我们对 useSWR 请求的行为进行一些自定义设置, 参数如下

revalidateOnFocus - 如果设置为 true,窗口焦点切换到此页面时将自动重新验证数据。
revalidateOnReconnect - 如果设置为 true,每次从离线到在线时将自动重新验证数据。
revalidateOnMount - 如果设置为 true,每次组件挂载时都会自动重新验证数据。
refreshWhenHidden - 如果设置为 true,在文档不可见时还是会自动重新验证数据。
refreshWhenOffline - 如果设置为 true,即使 offline,也会自动重新验证数据。
suspense - 如果设置为 true,在重新验证数据之前将显示占位符内容来保持组件渲染的持续性。
errorRetryCount - 它是重试次数,默认值为 3,当数据验证失败时,它将尝试重新验证数据的次数。
errorRetryInterval - 毫秒数,当数据验证失败后重试的间隔时间。默认值为 5 秒。
dedupingInterval - 重复验证响应的缓存时间,以毫秒为单位。
focusThrottleInterval - 切换页面焦点之后,重试时间的等待时间。
loadingTimeout - 最长等待请求的毫秒数,超时会显示加载错误消息。
import useSWR from 'swr'
const apiUrl = `/api/users/${userId}`const { data, error } = useSWR(apiUrl)

import useSWRImmutable from ‘swr/immutable’
useSWRImmutable 是一个 React Hooks,它是从 swr/immutable 库中导入的。它可以在缓存过期之前重新使用数据,以避免从服务器读取数据的时间和网络成本,帮助提高应用程序的性能和用户体验。
useSWRImmutable 并不是同步调用的。它是一个异步 Hook,在使用 useSWRImmutable 时,当我们作出数据请求时,它将使用本地缓存提供此数据。如果数据不存在于本地缓存中,则发起异步 API 请求,然后将结果存储在缓存中。下一次尝试获取这个数据的时候,useSWRImmutable 只需返回本地缓存中的数据。


import useSWRImmutable from 'swr/immutable'
// const { data, error } = useSWRImmutable(key, fetcher, options)
const { data: userInfo } = useSWRImmutable('userInfoConfig', getUserconfig, {})

import useSWRMutation from ‘swr/mutation’
useSWRMutation提供了简单且强大的方式来管理数据的更新和提交,从而让我们轻松地构建出 CRUD 应用程序。useSWRMutation Hook 可以帮助我们轻松地使用 REST API 进行数据更新、提交和创建。与传统的 useEffect 和 useState 结合使用方式不同,它可以处理HTTP请求的生命周期管理,并且还能自动更新缓存并在成功或失败时提供API响应。

const { trigger: cancleTrigger } = useSWRMutation('canleBuild', cancleBuild) as any
cancleTrigger(obj).then(res => {if (res.code === '0') {notification.success({message: '提示',description: '取消构建成功',})M({ ...appBuildparamsInfo, jobName })}})

import { useSWRConfig } from ‘swr’
useSWRConfig 是一个 React Hook,可以让我们轻松地配置和管理 useSWR Hook 的全局配置。假设我们要在所有使用 useSWR 的组件中统一配置 API 的缓存时间和错误重试次数,我们可以使用 useSWRConfig 来实现:

import { SWRConfig } from 'swr'
const { cache, mutate } = useSWRConfig({provider: () => new Map(),shouldRetryOnError: false,revalidateOnFocus: true,dedupingInterval: 10000,errorRetryInterval: 5000,errorRetryCount: 3})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/137568.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Postman汉化教程

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 Postman汉化教程 前言 前言 Postman是一款支持http协议的接口调试与测试工具,其主要特点就是功能强大,使用简单且易用性好 。无论是开发人员进行接口…

uniapp小程序才到第五层就报错navigateto:fail webview count limit exceed

错误截图 原因 小程序官方描述是说可以跳转10层,但是使用uniapp开发的程序在小程序中才运行到第五层就报错了,原因是因为没有设置appId。如果设置了就正常了。

FPGA UDP RGMII 千兆以太网(2)IDDR

1 xilinx原语 在 7 系列 FPGA 中实现 RGMII 接口需要借助 5 种原语,分别是:IDDR、ODDR、IDELAYE2、ODELAYE2(A7 中没有)、IDELAYCTRL。其中,IDDR和ODDR分别是输入和输出的双边沿寄存器,位于IOB中。IDELAYE2和ODELAYE2,分别用于控制 IO 口输入和输出延时。同时,IDELAYE2 …

文件缓存的读写

文件系统的读写,其实就是调用系统函数 read 和 write。下面的代码就是 read 和 write 的系统调用,在内核里面的定义。 SYSCALL_DEFINE3(read, unsigned int, fd, char __user *, buf, size_t, count) {struct fd f fdget_pos(fd); ......loff_t pos f…

数据分析是什么?

第一章- 数据分析是什么 数据分析是指 根据分析目的,用适当的分析方法及工具,对数据进行分析,提取有价值的信息,形成有效结论的过程。 数据分析的作用 通过观察数据,知道当前发生什么?通过具体的数据拆解…

Webpack 中 loader 的作用是什么?常用 loader 有哪些?

说说webpack中常见的Loader?解决了什么问题?- 题目详情 - 前端面试题宝典 1、loader 是什么 loader是 webpack 最重要的部分之一。 通过使用不同的 loader,我们能够调用外部的脚本或者工具,实现对不同格式文件的处理。 loader…

修改angular cli 的默认包管理器

运行 ng new Angular CLI 时默认使用 npm 作为包管理器。在本文中,您将了解如何设置不同的包管理器创建项目。 适用于 Angular 版本 6 及更高版本 配置包管理器 若要 Angular CLI 使用指定的包管理器,可以运行以下命令来使用想要的包管理器:…

嵌入式养成计划-48----QT--信息管理系统:百川仓储管理

一百二十二、信息管理系统:百川仓储管理 122.1 UI界面 122.2 思路 客户端: 用户权限有两种类型,一种是用户权限,一种是管理员权限,登录时服务器端会根据数据库查询到的此用户名的权限返回不同的结果,客户…

Semantic-Guided Zero-Shot Learning for Low-Light ImageVideo Enhancement

论文阅读之无监督低光照图像增强 Semantic-Guided Zero-Shot Learning for Low-Light Image/Video Enhancement 代码: https://github.com/ShenZheng2000/SemantiGuided-Low-Light-Image-Enhancement 在低光条件下增加亮度的一个可行方法是使用更高的ISO或更长时间…

mongodb数据同步到hive

背景 用户需求: 需要将 mongodb 的数据同步到 hive 表,共 2 亿条数据,总数据量约 30G 查阅一些博客后,大致同步方法有以下几种 手动离线 对于比较小的数据,可以先通过 mongoexport 将数据导出到本地 json 文件,再将…

仿mudou库one thread one loop式并发服务器

目录 1.实现目标 2.HTTP服务器 实现高性能服务器-Reactor模型 模块划分 SERVER模块: HTTP协议模块: 3.项目中的子功能 秒级定时任务实现 时间轮实现 正则库的简单使用 通⽤类型any类型的实现 4.SERVER服务器实现 日志宏的封装 缓冲区Buffer…

简单漂亮的登录页面

效果图 说明 开发环境&#xff1a;vue3&#xff0c;sass 代码 <template><div class"container"><div class"card-container"><div class"card-left"><span><h1>Dashboard</h1><p>Lorem ip…

HTTP 协议详解-上(Fiddler 抓包演示)

文章目录 HTTP 协议HTTP 协议的工作过程HTTP 请求 (Request)认识URL关于 URL encode认识 "方法" (method)GET 方法POST 方法其他方法请求 "报头" (header)请求 "正文" (body) HTTP 响应详解状态码响应 "报头" (header) HTTP 协议 HTT…

【编程语言发展史】Unity开发语言的历史发展

Unity开发前期版本时&#xff0c;使用的是一种名为UnityScript的类似JavaScript的语言。然而&#xff0c;随着时间的推移&#xff0c;开发者社区大多数人都倾向于使用C#进行开发&#xff0c;Unity决定将重点放在C#上&#xff0c;因为C#具有更强大的生态系统、更好的性能和更广泛…

Spring Boot 3.0正式发布及新特性解读

目录 【1】Spring Boot 3.0正式发布及新特性依赖调整升级的关键变更支持 GraalVM 原生镜像 Spring Boot 最新支持版本Spring Boo 版本版本 3.1.5前置系统清单三方包升级 Ref 个人主页: 【⭐️个人主页】 需要您的【&#x1f496; 点赞关注】支持 &#x1f4af; 【1】Spring Boo…

data对象内新增属性,console.log()可以打印出来,不重新渲染

原因&#xff1a;受 ES5 的限制&#xff0c;Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter&#xff0c;所以属性必须在 data 对象上才能让 Vue.js 转换它&#xff0c;才能让它是响应的&#xff1b; data(){newTitle:{title:’…

月销破30万辆后,比亚迪整了波大的

最近乘联会公布了 2023 年 10 月新能源乘用车厂商销量榜单。 其中最为亮眼犹如鹤立鸡群的榜首&#xff0c;没错依然是我们熟悉的那个迪子&#xff01; 单月销量超 30 万辆&#xff0c;相较去年同期暴涨 38.4%&#xff0c;创下了比亚迪有史以来新高。 同时也成为了国内首个月销…

element-ui的form校验失败

数值与字符串混淆 数值 <el-input type"number" v-model.number"form.averageFruitWeight" placeholder"请输入平均单果重"/>字符串 fruitDevelopmentStage: [{pattern: ^[-\\]?([0-9]\\.?)?[0-9]$, message: 输入必须为数字, trigge…

AD教程 (十一)封装的统一管理

AD教程 (十一)封装的统一管理 PCB封装添加 一个一个手动添加&#xff0c;效率太低&#xff0c;不建议使用 使用封装管理器快速添加&#xff0c;根据BOM表&#xff08;元器件清单&#xff09;&#xff0c;修改PCB封装 点击工具&#xff0c;选择封装管理器&#xff0c;进入封装…

耳机放大器的作用?HT97180 耳机放大器的作用又是什么?

耳机放大器是一种用于增强耳机音频信号的设备&#xff0c;它在提供更大音量、更好音质方面起到重要作用。它可以为耳机用户提供更好的音频体验&#xff0c;特别是对于高阻抗耳机和音频爱好者来说非常有用。 而HT97180为差分输入、可直接输出的耳机放大器。4.2V供电时&#xff0…