Simple secondary packaging axios in vue3+vite+ts project

Create a new request.ts file in the utils directory of the project, the code is as follows:

import axios, {
    
     InternalAxiosRequestConfig, AxiosInstance, AxiosResponse } from 'axios';
import router from "/@/router";
import {
    
     showToast } from "vant";
import {
    
     getToken, removeToken } from "/@/utils/auth";
// 进度条
import nprogress from "nprogress";
import "nprogress/nprogress.css";
const service: AxiosInstance = axios.create({
    
    
  baseURL: import.meta.env.VITE_GLOB_BASE_URL, // URL地址
  timeout: 120 * 1000, // 超时时间
});

// 添加请求拦截器
service.interceptors.request.use(
  (config: InternalAxiosRequestConfig) => {
    
    
    // 在发送请求之前做些什么
    nprogress.start();
    config.headers = {
    
    
      nonce: Date.parse(new Date().toString()),
      clientType: "H5",
      clientVersion: "2.2.1",
      timestamp: Date.parse(new Date().toString()),
      Authorization: getToken() ? "Bearer " + getToken() : null,
    };
    return Promise.resolve(config);
  },
  (error: any) => {
    
    
    // 处理请求错误
    return Promise.reject(error);
  },
);

// 添加响应拦截器
service.interceptors.response.use(
  (response: AxiosResponse<any>) => {
    
    
    // 对响应数据做点什么
    const res = response.data;
    console.log('response:', res);

    if (res.code != 1) {
    
    
      // 500005 用户没有token或者过期
      if (res.code == 500005) {
    
    
        removeToken();
        localStorage.removeItem("userInfo");
        router.replace({
    
     path: "/login" });
        nprogress.done();
      }
      if (res.code == 100001 || res.code == 2000) {
    
    
        nprogress.done();
        showToast(res.msg);
      }
      return Promise.reject();
    } else {
    
    
      nprogress.done();
      return Promise.resolve(res);
    }
  },
  (error: any) => {
    
    
    // 处理响应错误
    return Promise.reject(error);
  },
);

export default service;

Simple use, create a new api file directory under src, and create a new index.ts file inside, the code is as follows:

import request from "/@/utils/request";

enum Api {
    
    
    sysBannerList = '/goodsBanner/list',  // banner 列表
    sysHomeMenuList = '/homeMenu/getList',    // 菜单列表
    sysWeChatSignStr = '/v1/roles/roleEdit',  // jssdk 签名接口
}

// banner 列表
export const bannerList = () => request.get(Api.sysBannerList);
// 菜单列表
export const getMenuList = () => request.get(Api.sysHomeMenuList);
// jssdk 签名接口
export const getWeChatSignStr = (params: any) => request.get<any>(Api.sysWeChatSignStr, {
    
     params });

Briefly explain a few points:
1. It is suitable for students with a little bit of experience to watch.
2. For example: import { getToken, removeToken } from “/@/utils/auth”; It simply encapsulates the method of obtaining tokens. For regular Students who write projects should be very clear