VUE3 请求拦截器 响应拦截器

1，导入axios  （使用axios进行接口的请求，页面发送http请求，很多情况我们要对请求和其响应进行特定的处理，如：判断token，设置请求头。如果请求数非常多，单独对每一个请求进行处理会变得非常麻烦，程序的优雅性也会大打折扣。所以axios为开发者提供了这样一个API：拦截器。）

2.引入接口路径

3.书写拦截器

request.ts

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

export const cancelTokenArr: any = {
  functionArr: null,
};