vue项目中 axios请求拦截器与取消pending请求功能

本文介绍在Vue项目中如何使用Axios的请求拦截器统一处理请求头参数,包括添加token验证,以及如何通过取消正在pending状态的请求来优化用户体验,特别是在分页操作和路由切换场景下。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在开发vue项目中,请求是不可缺少的,在发送请求时常常需要统一处理一些请求头参数等设置与响应事件,这时利用请求拦截器再好不过。

这里以axios请求为例

实现了设置统一请求头添加token, 其中token在登录时被存入了localStorage中。

同时拦截器利用new cancelToken与定义的cancelPending方法实现了可以取消正在pending状态的请求,什么情况会需要取消请求呢?

如下两种情况:

1. 有一个局部分页时,用户快速点击第2页,然后继续点击第3页,如果网络不太稳定时,第2页的请求正在发送中,还未响应,但第3页的请求先响应了,过了一会第2 页请求才响应,这时用户处于第3页,但看到的数据确是第2页的,当然有人会说可以在发送请求过程中禁用掉分页按钮点击,但我感觉体验不太好,为何禁用呢,直接点击第3页时中断掉之前相同的请求即可。

2. 切换路由时,上一路由页面中仍有未响应的请求时切换了路由,应该把正在pending的所有请求中断取消掉。

 

下面是完整实现axios请求拦截器与取消pending请求功能的代码

let pending = [];
let    cancelToken = axios.CancelToken;
let    cancelPending = (config) => {
pending.forEach((item, index) => {
if(!!config){
if(item.u == config.url){
item.f(); //取消请求
pending.splice(index, 1); //移除当前请求记录
};
}else{
item.f(); //取消请求
pending.splice(index, 1); //移除当前请求记录
}
});
};

//验证登录状态
router.beforeEach((to, from, next) => {
//如果是需要验证登录状态的页面
if(to.matched.some(record => record.meta.requireAuth)){
let token = localStorage.getItem('token');
//如果已经登录,则正常进入
if(!!token){
cancelPending();
next();
}else{
next({'name': 'login', 'query': {'redirect': to.fullPath}});
};
}else if(to.name == 'login'){ //如果是登录页,则验证如果当前是登录状态自动跳转至系统主页,否则正常进入登录页
let token = localStorage.getItem('token');
//如果已经登录,则重定向至系统首页
if(!!token){
router.push({'name': 'SystemWelcome'});
}else{
next();
};
}else{ //其他页面正常进入
next();
};
});


//axios 请求拦截器
axios.interceptors.request.use(config => {
let token = localStorage.getItem('token');
if (!!token) { // 判断是否存在token,如果存在的话,则每个http header都加上token
config.headers.Authorization = `token ${token}`;
};
cancelPending(config);
config.cancelToken = new cancelToken((c) => {
pending.push({'u': config.url, 'f': c});
});
return config;
}, err => {
return Promise.reject(err);
});
//响应拦截器
axios.interceptors.response.use(response => {
cancelPending(response.config);
return response;
}, error => {
if (error.response) {
switch (error.response.status) {
case 401:
// 返回 401 清除token信息并跳转到登录页面
localStorage.removeItem('token');
router.push({'name': 'login', 'query': {'redirect': router.currentRoute.fullPath}});
}
}
return {data: {}}; // 返回接口返回的错误信息(这里返回空对象是为了避免控制台报错)
});

 

转载于:https://www.cnblogs.com/dibaosong/p/9528250.html

Vue项目中,我们通常会使用axios来发送请求。为了方便管理和维护代码,我们可以将axios请求进行统一封装。 首先,我们需要在项目中安装axios: ``` npm install axios --save ``` 然后,我们可以在src目录下新建一个api目录,用来存放所有的接口请求。在api目录下,我们可以新建一个request.js文件,用来封装axios请求: ``` import axios from 'axios'; // 创建axios实例 const service = axios.create({ baseURL: process.env.BASE_API, // api的base_url timeout: 5000 // 请求超时时间 }); // request拦截器 service.interceptors.request.use(config => { // 在请求发送之前做一些处理 return config; }, error => { // 处理请求错误 console.log(error); Promise.reject(error); }) // respone拦截器 service.interceptors.response.use( response => { // 在接收响应做一些处理,例如统一的错误处理 return response.data; }, error => { console.log('err' + error);// for debug return Promise.reject(error); } ) export default service; ``` 这里我们创建了一个axios实例,并进行了一些配置,例如设置请求超时时间、拦截请求和响应等。并且将其导出,其他地方可以直接引用该实例进行请求。 接下来,我们可以在api目录下新建一个模块,例如user.js,用来存放用户相关的接口请求。在user.js中,我们可以这样写: ``` import request from '@/api/request'; export function login(username, password) { return request({ url: '/user/login', method: 'post', data: { username, password } }) } export function getInfo(token) { return request({ url: '/user/info', method: 'get', params: { token } }) } ``` 这里我们引入了之前封装的axios实例,然后对外导出两个方法login和getInfo,分别用来请求登录和获取用户信息的接口。 最后,我们可以在Vue组件中使用这些接口,例如: ``` import { login, getInfo } from '@/api/user'; export default { name: 'Login', methods: { handleLogin() { login(this.username, this.password).then(response => { // 处理登录成功的逻辑 getInfo(response.token).then(info => { // 处理获取用户信息成功的逻辑 }) }) } } } ``` 这里我们引入了之前定义的login和getInfo方法,并在handleLogin方法中调用它们。需要注意的是,我们在处理登录成功后,还调用了getInfo方法来获取用户信息。这里我们可以看到,我们可以将多个请求串联起来进行处理。 在实际开发中,我们经常会遇到重复请求的问题,例如多次点击提交按钮或者页面切换时进行数据加载等。为了避免重复请求,我们可以对axios进行进一步封装,例如: ``` import axios from 'axios'; // 定义一个空的数组,用来存储每个请求取消函数和标识 const pending = []; const CancelToken = axios.CancelToken; const removePending = (config) => { for (let i = 0; i < pending.length; i++) { if (pending[i].url === config.url + '&' + config.method) { pending[i].cancel(); // 取消重复请求 pending.splice(i, 1); // 删除已经取消请求记录 } } } // 创建axios实例 const service = axios.create({ baseURL: process.env.BASE_API, // api的base_url timeout: 5000 // 请求超时时间 }); // request拦截器 service.interceptors.request.use(config => { // 在请求发送之前做一些处理 removePending(config); config.cancelToken = new CancelToken((c) => { pending.push({ url: config.url + '&' + config.method, cancel: c }); }); return config; }, error => { // 处理请求错误 console.log(error); Promise.reject(error); }) // respone拦截器 service.interceptors.response.use( response => { // 在接收响应做一些处理,例如统一的错误处理 removePending(response.config); return response.data; }, error => { console.log('err' + error);// for debug return Promise.reject(error); } ) export default service; ``` 这里我们定义了一个pending数组,用来存储每个请求取消函数和标识。在每次请求发送之前,我们会先调用removePending函数,用来取消重复请求。在每次请求完成之后,我们会再次调用removePending函数,用来删除已经取消请求记录。这样就可以避免重复请求的问题了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值