Axios-CancelToken 取消重复请求
2020/10/24 8:03:44
本文主要是介绍Axios-CancelToken 取消重复请求,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
项目地址:https://github.com/Ewall1106/mall
文档地址:https://docs.xwhx.top/mall/
有什么用?
-
当用户频繁点击在短时间内发送多个
ajax
请求,但是由于网络原因服务器数据无法及时响应返回,这时候,就会有可能造成前端页面数据不匹配的情况。 -
具体场景来说,在用户网速不好的情况下的比如搜索框
onchange
事件的模糊搜索、触底刷新请求列表数据、tab
栏的高频切换等等。 -
再者,这样也浪费服务器资源,也是性能优化的一种必要手段。
基本使用
-
官网地址:Axios-CancelToken
-
官网的基本示例如下。
const CancelToken = axios.CancelToken; let cancel; axios.get('/user/12345', { cancelToken: new CancelToken(function executor(c) { // An executor function receives a cancel function as a parameter cancel = c; }), }); // cancel the request cancel();
具体使用
-
利用
axios
的拦截器,在请求拦截的时候将当前request url
和取消函数c
以key-value
的形式保存下来。 -
在响应拦截器时将这个
key
删除,如果重复请求了就会调用取消请求函数。
// https://github.com/Ewall1106/mall/blob/master/src/utils/request.js import axios from 'axios'; const CancelToken = axios.CancelToken; const pendingReq = {}; // 请求拦截器 service.interceptors.request.use( (config) => { if (store.getters.token) { // 取消请求 const key = config.url + '&' + config.method; pendingReq[key] && pendingReq[key]('操作太频繁了~'); config.cancelToken = new CancelToken((c) => { pendingReq[key] = c; }); // ... } return config; }, (error) => { console.log(error); return Promise.reject(error); } ); // 响应拦截器 service.interceptors.response.use( (response) => { // 取消请求 const key = response.config.url + '&' + response.config.method; pendingReq[key] && delete pendingReq[key]; // ... }, (error) => { console.log('err' + error); Toast.fail(error.message); return Promise.reject(error); } ); export default service;
这篇关于Axios-CancelToken 取消重复请求的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-15PingCAP 黄东旭参与 CCF 秀湖会议,共探开源教育未来
- 2024-05-13PingCAP 戴涛:构建面向未来的金融核心系统
- 2024-05-09flutter3.x_macos桌面os实战
- 2024-05-09Rust中的并发性:Sync 和 Send Traits
- 2024-05-08使用Ollama和OpenWebUI在CPU上玩转Meta Llama3-8B
- 2024-05-08完工标准(DoD)与验收条件(AC)究竟有什么不同?
- 2024-05-084万 star 的 NocoDB 在 sealos 上一键起,轻松把数据库编程智能表格
- 2024-05-08Mac 版Stable Diffusion WebUI的安装
- 2024-05-08解锁CodeGeeX智能问答中3项独有的隐藏技能
- 2024-05-08RAG算法优化+新增代码仓库支持,CodeGeeX的@repo功能效果提升