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
收藏
上一篇:
安装yum和securert工具
暂无评论信息
- 相关文章
- 文章推荐
-
淘宝 NPM 镜像站喊你切换新域名啦
淘宝 NPM 镜像站(npm.taobao.org)自 2014 年 正式对外服务,一开始只是想简单地做 NPM 的中国镜像站点,回馈国内前端社区,不知不觉竟然一直运行到现在。当年参考 Ruby Gems 淘宝镜像 的方式,跟阿里开源组织申请了 taobao.org 的二级域名,镜像站点名称也自然而然地取名为 淘宝 NPM 镜像站 (下称 CNPM)。
-
乐视官方确认还有 400 多人:消息称员工“没有内卷和 996”,过着“没有老板”的神仙日子
7 月 11 日消息,近期,微博博主 @Fenng 分享了一个冷知识:乐视居然还剩下 400 多人,有不少是五年以上的老员工。这些老员工称“幸福感是很多老乐视人留下来的理由”,没有内卷和 996,没拖欠过留下来的员工的工资,也没停过社保。
-
git:如何管理本机的多个ssh密钥(多个远程仓库账号)
如果我们电脑上已经存在了一个ssh key,那么我们需要在我们电脑上生成第二个你想在本电脑上使用的id_rsa,使用命令:ssh-keygen -t rsa -C "你的github账号"。
-
半导体短缺即将结束?分析师:如果没有 1 美元芯片会影响更多
德勤咨询(Deloitte Consulting)的芯片分析师认为,随着芯片行业资本支出的增加,需求度较高的工厂已经开工,预示着短缺情况即将结束。
- 点击排行
- 站长推荐
- 猜你喜欢
- 网站信息
- 站内问答:12篇
- 站内文章:207篇
- 建站时间:已运行917天
- 备案号: 浙ICP备2022018799号
- 语言:
English(USA)
French(FR)
Chinese(ZH)
无数据