网站建设开发步骤,南京做网站公司 雷仁,dedecms可以做什么网站,wordpress页面视频播放前言
咱们的网站或者程序#xff0c;每一个页面和操作都需要请求后端接口来获取响应和渲染页面#xff0c;抛开post请求方式的接口不说#xff0c;部分get请求得到的数据#xff0c;短时间内不会更新#xff0c;或者短时间得到的响应数据不会变化#xff0c;这个时候就可…前言
咱们的网站或者程序每一个页面和操作都需要请求后端接口来获取响应和渲染页面抛开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))}},//取出数据getT(key: string) {// 先定义一个变量临时存放提取的值const temp TJSON.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))},//取出数据getT(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大家可以根据自行需要来使用sessionStoragesessionStorage就没有cacheTime 了可以自行设置
import axios from /utils/axios
import { storage } from /utils/storageinterface 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 requestapi.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改一下同样适用
