vue+ts的axios接口简单封装_vue ts封装axios

利用axios中的AxiosError做请求错误拦截处理：

首先，在根目录下新建文件夹utils，在utils中新增request.ts文件，代码如下

import {
    Notification } from 'element-ui';
import axios, {
    AxiosError } from 'axios';
// import microActions from '@/qiankun/actions';
import {
    downloadXlsx } from './tools';
// 创建 axios 实例
const request = axios.create({
   
  baseURL: process.env.VUE_APP_API_BASE_URL,
  timeout: 60000, // 请求超时时间
});
// 错误码集合
const TOKEN_ERROR_CODE = ['401', '0019', '0005', '001'];

// 异常拦截处理器
const errorHandler = (error: AxiosError) => {
   
  if (error.response) {
   
    const data = error.response.data;
    // 身份信息过期
    if (TOKEN_ERROR_CODE.includes(error.response.status)) {
   
      // 非乾坤框架中处理401
      if (window.location.pathname != '/login') {
   
        window.location.href = '/login';
      }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31