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

在开发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: {}}; // 返回接口返回的错误信息（这里返回空对象是为了避免控制台报错）
});

vue项目中 axios请求拦截器与取消pending请求功能 - 年少、 - 博客园相关推荐

在vue项目中引用萤石云播放器插件
在vue项目中引用萤石云播放器插件 1. 萤石云官方开发文档: https://open.ys7.com/help/31 2. 登录官方网站:https://open.ys7.com/cn/s/ind ...
Django中的Model（字段） - 第五轻柔的code - 博客园
Django中的Model(字段) - 第五轻柔的code - 博客园 Django ORM 中的批量操作 - AlphaJx - 博客园
Django中的Model（操作表） - 第五轻柔的code - 博客园
Django中的Model(操作表) - 第五轻柔的code - 博客园
axios请求拦截器错误_React中使用高阶组件和axios的拦截器，统一处理请求失败提示...
在前端开发中,判断边界条件和重要,通常我们要花费开发中的很大一部分时间做边界条件处理.发送ajax请求时,假设有这样一个需求: 每个页面发送ajax请求,如果请求失败,在页面上统一弹出样式一样的错误提 ...
vue项目中axios的封装
1.安装 1 npm install axios --save 2.新建http.js,封装拦截器以及多种请求方式 1 import axios from 'axios'; 2 import { Me ...
聊聊在Vue项目中使用Decorator装饰器
戳蓝字" Web前端严选 " 关注我们哦 ! 前言初衷: 前几天我在公司其它Vue项目中,发现了是用Decorator装饰器模式开发的,看起来整体代码还不错,于是就做了一下笔记分 ...
dlibdotnet 人脸相似度源代码_使用dlib中的深度残差网络(ResNet)实现实时人脸识别 - supersayajin - 博客园...
opencv中提供的基于haar特征级联进行人脸检测的方法效果非常不好,本文使用dlib中提供的人脸检测方法(使用HOG特征或卷积神经网方法),并使用提供的深度残差网络(ResNet)实现实时人脸识别 ...
vue项目中实现登录拦截
一.路由拦截如果开发的是后台管理项目,希望必须登录才能访问其他页面的话,就用下面的这种方式进行拦截 import Vue from 'vue' import Router from 'vue-rou ...
vue项目中设置全局loading时遇到多个请求时loading加载显示问题
问题详细描述项目设置全局loading动画加载,如果页面一次加载了多个请求 ,当其中有一个接口请求成功后 loading加载动画会消失,但是其实此时还有一个接口还未请求成功那么其实加载动画不应 ...

vue项目中 axios请求拦截器与取消pending请求功能 - 年少、 - 博客园

vue项目中 axios请求拦截器与取消pending请求功能 - 年少、 - 博客园相关推荐

最新文章

热门文章