1，导入axios （使用axios进行接口的请求，页面发送http请求，很多情况我们要对请求和其响应进行特定的处理，如：判断token，设置请求头。如果请求数非常多，单独对每一个请求进行处理会变得非常麻烦，程序的优雅性也会大打折扣。所以axios为开发者提供了这样一个API：拦截器。）
2.引入接口路径
3.书写拦截器
request.ts文章来源：https://www.toymoban.com/news/detail-594472.html
import { ElNotification } from 'element-plus'
import type {AxiosRequestConfig, AxiosResponse} from 'axios';
import axios from 'axios';
import { cancelTokenArr } from '../utils';
export interface HttpResponse<T = unknown> { //ts校验
status: number;
msg: string;
code: number;
data: T;
}
const requests = axios.create({
baseURL: `*********`, //引入接口
timeout: 20000,
});
// 请求拦截器
requests.interceptors.request.use(
(config: AxiosRequestConfig) => {
const at = window.localStorage.getItem('user_token'); //储存接口
// 存储需要中断的接口
config['cancelToken'] = new axios.CancelToken(function executor(cancel) {
cancelTokenArr.functionArr = cancel;
}); //CancelToken防止路由多次发送请求
// 此处对请求进行配置
if (at) {
config.headers!['UserToken'] = at;
}
return config;
},
error => {
cancelTokenArr.functionArr = null;
return Promise.reject(error);
},
);
// 响应拦截器
requests.interceptors.response.use(
(response: AxiosResponse<HttpResponse>) => {
cancelTokenArr.functionArr = null;
const res = response;
return res;
},
error => {
cancelTokenArr.functionArr = null;
if(error.name !== 'CanceledError'){
ElNotification.error('Something is wrong!');
}
return Promise.reject(error);
},
);
export default requests;
utils.ts文章来源地址https://www.toymoban.com/news/detail-594472.html
export const cancelTokenArr: any = {
functionArr: null,
};到了这里，关于VUE3 请求拦截器 响应拦截器的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
