vue axios 缓存 接口请求实现缓存加载

文章写的多了,开头就不知道怎么写了,硬挤一些句子总觉的卖弄。其实更多的想留下各位看官,多多的点赞,多多的关注,多的收藏。为将来的博客化动作做好前期数据粉丝基础。哦哦哦,我在想啥呢。。这大下午的。。。。嘿嘿。。。。。。。

言归正传,不阿传。

开发过程中总有一些数据存放在服务器,但是这些数据基本上一旦生成不会再变,比如省市区三级联动数据、一些静态数据字典等。每次进入页面每次都通过接口加载,总不是最好的方案。今天闲来针对 axios请求库里面增加缓存功能,纯手撸逻辑,抛砖引玉提供一个思路。以下为源代码:

注意此缓存为内存缓存模型,未写入localstorage,你自己可以实现localstorage缓存读取。

javascript 复制代码
/**缓存池,此缓存为内存缓存模块,未写入localstorage,你自己可以实现localstorage缓存读取*/
const cache = {};

const sortParams = (params)=>{
    params = params?params:{}
    let sort = Object.keys(params).sort();
    return sort.reduce((sorted,key)=>{
        sorted[key] = params[key]
        return sorted;
    },{})
}


const serializedParams = (params) => {
    let p = Object.entries(params).map(([key,value]) => `$[key=${encodeURIComponent(value)}`).join('&')
    return p
}

const generateCacheKey = (config)=>{
    const {url,params} = config;
    const sp = sortParams(params)
    const sep = serializedParams(sp);

    return `${url}${sep}`
}


const cacheAdapter = (config) =>{
    const cacheKey = generateCacheKey(config);
    const response = cache[cacheKey];
    if (config.cache && response)
    {
        return Promise.resolve(response);
    }
    return axios.defaults.adapter(config);
}


const saveCache = (config,data) =>{
    const cacheKey = generateCacheKey(config);
    const rp = JSON.parse(JSON.stringify(data));
    cache[cacheKey] = rp
}



// 创建axios实例
const service = axios.create({
    baseURL:
        process.env.NODE_ENV === "production"
            ? process.env.VUE_APP_BASE_API
            : "/", // api 的 base_url
    timeout: Config.timeout, // 请求超时时间
    adapter:cacheAdapter
});

// request拦截器
service.interceptors.request.use(
    (config) => {
        if (getToken()) {
            config.headers["Authorization"] = getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
        }
        config.headers["Content-Type"] = "application/json";
        return config;
    },
    (error) => {
        Promise.reject(error);
    }
);

// response 拦截器
service.interceptors.response.use(
    (response) => {
        if (response.config.cache)
        {
            saveCache(response.config,response)
        }
        return response.data;
    },
    (error) => {
        // 兼容blob下载出错json提示
        return Promise.reject(error);
    }
);
export default service;

在调用接口的地方稍微改造一下:增加一个属性:cache:true时则会读取缓存进行接口响应。不使用缓存时,这个值给false或者是不给这个属性即可。

A、使用缓存:

B、不使用缓存:

相关推荐
Zhangzy@1 小时前
仓颉的空安全基石:Option类型的设计与实践
java·开发语言·安全
IDOlaoluo2 小时前
FindBugs-IDEA-1.0.1.zip安装使用教程(IntelliJ IDEA插件手动安装查Bug)
java·bug·intellij-idea
程序员小凯7 小时前
Spring Boot文件处理与存储详解
java·spring boot·后端
十里-8 小时前
在 Vue2 中为 Element-UI 的 el-dialog 添加拖拽功能
前端·vue.js·ui
Miraitowa_cheems8 小时前
LeetCode算法日记 - Day 88: 环绕字符串中唯一的子字符串
java·数据结构·算法·leetcode·深度优先·动态规划
D_C_tyu9 小时前
Vue3 + Element Plus 实现前端手动分页
javascript·vue.js·elementui
黑云压城After9 小时前
vue2实现图片自定义裁剪功能(uniapp)
java·前端·javascript
千里码aicood9 小时前
python+vue旅游购票管理系统设计(源码+文档+调试+基础修改+答疑)
vue.js·python·旅游
zcl_199110 小时前
记一次ThreadLocal导致的生产事故
java
RoboWizard10 小时前
怎么判断我的电脑是否支持PCIe 5.0 SSD?Kingston FURY Renegade G5
java·spring·智能手机·电脑·金士顿