axios 请求的缓存封装

前言

咱们的网站或者程序,每一个页面和操作都需要请求后端接口来获取响应和渲染页面,抛开post请求方式的接口不说,部分get请求得到的数据,短时间内不会更新,或者短时间得到的响应数据不会变化,这个时候就可以把从接口得到的数据缓存下来,下次刷新或者是请求接口的时候,就不用请求接口,从而大幅度提高用户体验。

当然,如果服务器的流量很多且兆宽也比较大,可以自动忽略。

不过自研小网站,或者资讯类、文字类数据量比较大的程序就可以完全利用起来了。

实现

storage.ts

  • 首先肯定是需要缓存的工具类,来直接使用
/*** 封装操作localstorage本地存储的方法*/
export const storage = {//存储set(key: string, value: any, expires: number) {const obj = {value: value,expires: expires,//有效时间startTime: new Date().getTime() // 记录存储数据的时间,转换为毫秒值存下来}// 判断是否设置了有效时间if (obj.expires) {// 如果设置了时间,把obj转换数据类型转换为字符串对象存起来localStorage.setItem(key, JSON.stringify(obj))}else {// 如果没有设置有效时间,直接把value值存进去localStorage.setItem(key, JSON.stringify(obj.value))}},//取出数据get<T>(key: string) {// 先定义一个变量临时存放提取的值const temp = <T>JSON.parse(localStorage.getItem(key))// 判断有没有设置expires属性// 如果有,就需要判断是否到期了if (temp && temp != "undefined" && temp != "null" && temp.expires ) {let data = new Date().getTime()if (data - temp.startTime > temp.expires) {// 此时说明数据已过期,清除掉localStorage.removeItem(key)// 直接returnreturn}else {// 如果没有过期就输出return temp.value}}else {// 如果没有设置,直接输出return temp}},// 删除数据remove(key: string) {localStorage.removeItem(key)}
};/*** 封装操作sessionStorage本地存储的方法*/
export const sessionStorage = {//存储set(key: string, value: any) {window.sessionStorage.setItem(key, JSON.stringify(value))},//取出数据get<T>(key: string) {const value = window.sessionStorage.getItem(key)if (value && value != "undefined" && value != "null") {return JSON.parse(value)}return null},// 删除数据remove(key: string) {window.sessionStorage.removeItem(key)}
}

cacheAxios.ts

  • 其实就是将自己的axios请求做个处理,请求的时候用封装的工具请求类即可
  • 我举例的是localStorage,大家可以根据自行需要来使用sessionStorage
  • sessionStorage就没有cacheTime 了,可以自行设置
import axios from '@/utils/axios'
import { storage } from '@/utils/storage'interface optionsFace {isCache?: boolean; // 是否缓存cacheKey?: string; // 缓存key值cacheTime?: number; // 缓存默认值 默认为3天 86400 * 3,单位秒
}const request = async (config: any, {isCache = false, cacheKey, cacheTime = 86400 * 3}: optionsFace) => {// 判断是否需要缓存数据,if (isCache) {const cacheData = storage.get(cacheKey)if (cacheData) {// 有缓存数据直接返回return new Promise((resolve) => {resolve(cacheData)})}else {const resData = await axios(config)// 根据自己的接口来判断if (resData.code != 0) {storage.set(cacheKey, resData, cacheTime * 1000)}// 返回结果return new Promise((resolve) => {resolve(resData)})}} else {return axios(config)}
}export default request

api.ts

  • 接口工具类,使用方式就都一模一样的
// 使用封装的缓存axios
import request from '@/utils/cacheAxios';/*** 功能:获取 列表*/
export const getList = (params: Object, options: Object) => {return request({url: '/Wikipedia/getList',method: 'get',params: params}, options);
};

页面使用

/*** 功能:获取 首页数据*/
const getHome = () => {// 这里的cacheKey,可以拼接上页码// const cacheKey = 'homeData' + pageCurrent// 配置里还有个时间参数,工具类里是默认3天,可以自行设置getList({}, {isCache: true, cacheKey: 'homeData'}).then(res => {// 逻辑处理、即使是缓存得到的数据也是一样的,不会影响业务处理})
}

小结

  • 很多人可能不会使用这个多余的操作,可是我自研了中小型网站,很多数据需要频繁渲染,且数据都是一样的,所以需要如此来降低服务器的成本和前端体验
  • 缓存的数据,建议是列表类数据,全是明文的,这样即使别人拿到也没用
  • 本文是基于vue,不过react、小程序、uniapp改一下同样适用

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

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

相关文章

【面试经典150 | 区间】插入区间

文章目录 Tag题目解读题目来源解题思路方法一&#xff1a;合并区间方法二&#xff1a;模拟 其他语言python3 写在最后 Tag 【模拟】【数组】 题目解读 给定一个含有多个无重叠区间的数组&#xff0c;并且数组已经按照区间开始值升序排序。在列表中插入一个新的区间&#xff0…

小程序原生代码转uniapp

写了一份小程序原生代码&#xff0c;想转为uniapp 再转为其他平台发布 1、在命令行里&#xff0c;运行【 npm install miniprogram-to-uniapp -g 】进行安装&#xff0c;因为这个包是工具&#xff0c;要求全局都能使用&#x…

JS加密/解密之webpack打包代码逆向

Webpack 是一个强大的打包工具&#xff0c;能够将多个文件打包成一个或多个最终的文件。然而&#xff0c;将已经经过打包的代码还原回原始源代码并不是一件直接的事情&#xff0c;因为 webpack 打包的过程通常会对代码进行压缩、混淆和优化&#xff0c;丢失了部分变量名和代码结…

【C++11新特性】右值引用和移动语义(移动构造,移动赋值)

文章目录 前言一、列表初始化&#xff08;不同于初始化列表&#xff09;二、initializer_list三、decltype关键字四、nullptr五、右值引用移动拷贝和移动赋值被编译器识别成将亡值的原因 左值引用和右值引用的场景和价值右值引用的场景move函数 六、关于右值引用的功能和属性问…

全景分割的自监督学习

在本章中,我们将第3章中讨论的SSL方法扩展到语义和全景分割任务。使用手动生成的标签训练的卷积神经网络通常用于语义或实例分割。 在精准农业中,自动化花朵检测方法使用监督模型和后处理技术,随着花朵的外观和数据采集条件的变化,这些技术可能无法始终如一地执行。我们提…

pinctrl子系统 - 架构和结构体关系(四)

一&#xff0c;pinctrl的引入 由于SoC系统越来越复杂、集成度越来越高&#xff0c;SoC中pin的数量也越来越多、功能也越来越复杂&#xff0c;这就对如何管理、使用这些pins提出了挑战。因此&#xff0c;用于管理这些pins的硬件模块&#xff08;pin controller&#xff09;就出…

C++基础——结构体

1 概述 结构体是用户自定义的数据类型&#xff0c;可以包含不同的数据类型 2 定义和使用 定义一个学生的结构体 //结构体定义 struct student {//成员列表string name; //姓名int age; //年龄int score; //分数 }stu3; //结构体变量创建方式3 int main() {//结构体…

ChatGPT 的工作原理学习 难以理解 需要先找个容易的课来跟下。

ChatGPT 的工作原理 传统搜超搜引擎原理&#xff1a;蜘蛛抓取和数据收集&#xff0c;用户交互查找。 ChatGPT 的工作原理&#xff1a;数据收集称为预训练&#xff0c;用户响应阶段称为推理。 ChatGPT是一种基于自然语言处理技术的人工智能模型&#xff0c;它的工作原理建立在…

AWS SAP-C02教程4--身份与联合身份认证

AWS的账号和权限控制一开始接触的时候觉得很复杂,不仅IAM、Identiy Federation、organization,还有Role、Policy等。但是其实先理清楚基本一些概念,然后在根据实际应用场景去理解设计架构,你就会很快掌握这一方面的内容。 AWS的账号跟其它一些云或者说一些SAAS产品的账号没…

c# xml 参数配置表的使用

使用简介 实际使用界面 配置表管理界面 进入 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms;…

关于电路的输入阻抗与输出阻抗的理解

一、输入阻抗 输入阻抗是指一个电路输入端的等效阻抗。在输入端上加上一个电压源U&#xff0c;测量输入端的电流I&#xff0c;则输入阻抗Rin就是U/I。你可以把输入端想象成一个电阻的两端&#xff0c;这个电阻的阻值&#xff0c;就是输入阻抗。 输入阻抗跟一个普通的电抗元件…

用GDB调试程序的栈帧

2023年10月17日&#xff0c;周二晚上 目录 练习GDB栈帧调试功能的程序 GDB栈帧方面的指令 调试效果 练习GDB栈帧调试功能的程序 斐波那契数列 #include <iostream>int factorial(int n) {if (n < 1) {return 1;} else {return n * factorial(n - 1);} }int main(…

Redis数据结构之listpack

前言 当数据量较小时&#xff0c;Redis 会优先考虑用 ziplist 来存储 hash、list、zset&#xff0c;这么做可以有效的节省内存空间&#xff0c;因为 ziplist 是一块连续的内存空间&#xff0c;它采用一种紧凑的方式来存储元素。但是它也有缺点&#xff0c;比如查找的时间复杂度…

单例模式——数据库连接池设计Java代码实现

以下是一个简单的Java代码示例&#xff0c;演示了如何使用单例模式来设计一个数据库连接池&#xff1a; import java.sql.Connection;import java.sql.DriverManager;import java.sql.SQLException;import java.util.ArrayList;import java.util.List; public class DatabaseCo…

nginx基础概念

1.正向代理&#xff1a;代理的是客户端&#xff0c;一般有明确的访问对象 比如&#xff1a;我现在通过v-p-n去访问YouTube&#xff0c;那么就是正向代理。 2.反向代理&#xff1a;代理的是服务器 最常见的就是web中&#xff0c;nginx去代理一群后端的服务器。 3.负载均衡&…

Flume 整合 Kafka

1.背景 先说一下,为什么要使用 Flume + Kafka? 以实时流处理项目为例,由于采集的数据量可能存在峰值和峰谷,假设是一个电商项目,那么峰值通常出现在秒杀时,这时如果直接将 Flume 聚合后的数据输入到 Storm 等分布式计算框架中,可能就会超过集群的处理能力,这时采用 Kaf…

制造企业如何做好MES管理系统需求分析

随着制造业的不断发展&#xff0c;制造企业对于生产过程的管理需求日益增长。为了提高生产效率和质量&#xff0c;越来越多的制造企业开始关注MES生产管理系统的需求分析。本文将从以下几个方面探讨制造企业如何做好MES管理系统需求分析。 一、明确需求 在进行MES管理系统需求…

Unity DOTS Component概述

最近DOTS终于发布了正式的版本, 我们来分享以下DOTS里面地几个关键概念&#xff0c;方便大家上手学习掌握Unity DOTS开发。 Unity DOTS 中Entity作为实体不直接去存放数据&#xff0c;而是将数据以一个个的组件为载体来存放起来。每个Entity会得到一些不同的ComponentData的组…

Vue 网络处理 - axios 异步请求的使用,请求响应拦截器

目录 一、axiox 1.1、axios 简介 1.2、axios 基本使用 1.2.1、下载核心 js 文件. 1.2.2、发送 GET 异步请求 1.2.3、发送 POST 异步请求 1.2.4、发送 GET、POST 请求最佳实践 1.3、请求响应拦截器 1.3.1、拦截器解释 1.3.2、请求拦截器的使用 1.3.3、响应拦截器的使用…