axios请求缓存+防止重复提交
分类专栏: Javascript&
简介 前端实现api接口缓存。
<pre>import axios from 'axios'
// 数据存储
export const cache = {
data: {},
set (key, data) {
this.data[key] = data
},
get (key) {
return this.data[key]
},
clear (key) {
delete this.data[key]
}
}
// 建立唯一的key值
export const buildUniqueUrl = (url, method, params = {}, data = {}) => {
const paramStr = (obj) => {
if (toString.call(obj) === '[object Object]') {
return JSON.stringify(Object.keys(obj).sort().reduce((result, key) => {
result[key] = obj[key]
return result
}, {}))
} else {
return JSON.stringify(obj)
}
}
url += `?${paramStr(params)}&${paramStr(data)}&${method}`
return url
}
// 防止重复请求
export default (options = {}) => async config => {
const defaultOptions = {
time: 0, // 设置为0,不清除缓存
...options
}
const index = buildUniqueUrl(config.url,config.method,config.params,config.data)
let responsePromise = cache.get(index)
if (!responsePromise) {
responsePromise = (async () => {
try {
const response = await axios.defaults.adapter(config)
return Promise.resolve(response)
} catch (reason) {
cache.clear(index)
return Promise.reject(reason)
}
})()
cache.set(index, responsePromise)
if (defaultOptions.time !== 0) {
setTimeout(() => {
cache.clear(index)
}, defaultOptions.time)
}
}
return responsePromise.then(data => JSON.parse(JSON.stringify(data))) // 为防止数据源污染
}
例子:
import axios from 'axios'
import cache from './cache'
// get请求
export async function getData (payload) {
return axios.get('/path', {
params: payload,
adapter: cache({
time: 0
})
})
}
// post请求
export async function postData (payload) {
return axios.post('/path', payload, {
adapter: cache({
time: 1000
})
})
}
</pre>
分享到:
转载:
https://segmentfault.com/a/1190000013167994
喜欢 1
收藏
暂无评论信息
- 相关文章
- 文章推荐
-
jQuery 3.0正式发布
jQuery 基金会刚刚发布了该 Java 框架的 3.0 版本,并且首次抛弃了对老旧的 IE 浏览器的支持。jQuery 3.0 的工作始于 2014 年 10 月,其最初目标是在 2.0 版本之上进行完善,并和遥远的 1.0 版代码说再见——因为要兼容 IE 的缘故,其已经臃肿不堪。jQuery 2.0 已经与 1.0 版本完全不兼容,而 3.0 也将继续这一路线。
-
HTML 面试知识点总结
本部分主要是笔者在复习 HTML 相关知识和一些相关面试题时所做的笔记,如果出现错误,希望大家指出!
-
亚马逊推出“无需收银员”的新技术,以此帮助品牌和广告商提高销量
北京时间 6 月 30 日早间消息,据报道,亚马逊发明了一种无需收银员的技术,可以加快人们去杂货店或便利店的速度。现在,该公司希望利用这个跟踪系统来帮助品牌和广告商提高销量。&
-
眼镜试戴的装饰效果
开发眼镜类产品的时候需要使用试戴的功能,这里就有你需要的学习资料哦!
- 点击排行
- 站长推荐
- 猜你喜欢
- 苹果 CEO 库克、特斯拉 CEO 马斯克、Meta CEO 扎克伯格等科技大佬将参加太阳谷峰会
- 'MongoDB: Failed to parse objectId ' in $convert with no onError value: Invalid string length for parsing to OID, expected 24 but found 0'
- 娱美德旗下MMORPG手游《传奇4》将推出新PVP玩法"比奇掠夺"&
- 全国计算机二级Python资料
- git:如何管理本机的多个ssh密钥(多个远程仓库账号)
- 高知特获国民保险公司多年合同以加速数字化转型
- flutter doctor -v 出现感叹号
- HTML 面试知识点总结
- mediaDevices.getUserMedia提示DOMException:Permission denied by
- js中加载script标签监听失败和成功的回调
- 网站信息
- 站内问答:12篇
- 站内文章:212篇
- 建站时间:已运行1107天
- 备案号: 浙ICP备2022018799号
- 语言:
English(USA)
French(FR)
Chinese(ZH)
无数据