vue3+ts+axios请求封装

新建request.ts文件，编码如下：

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios';
import { message } from 'ant-design-vue'
import qs from 'qs';


const request: AxiosInstance = axios.create({
    baseURL: process.env.VUE_APP_GATEWAY_URI, // API 请求的默认前缀，可根据环境变量自行配置
    timeout: 60000, // 请求超时时间
});

// 异常拦截处理器
const errorHandler = (error: AxiosError) => {
    if (error.response) {
        switch (error.response.status) {
        case 401:
          // 登录过期错误处理
        break;
        case 500:
          // 服务器错误处理
        break;
        default:
        }
    }
    return Promise.reject(error);
};

// request interceptor
request.interceptors.request.use((config: AxiosRequestConfig) => {
    /**
     * 如果token 存在，则给请求头加token
     */
    const token = sessionStorage.getItem('token');
    if (token) {
        config.headers.Authorization = `Bearer ${JSON.parse(token)}`;
    }

    // qs是axios自带的序列化参数方式
    if (
        config.headers &&
        config.headers["Content-Type"] &&
        config.headers["Content-Type"].includes("application/x-www-form-urlencoded")
    ) {
        config.params = qs.stringify(config.params);
    }
    return config;
}, errorHandler);

// response interceptor
request.interceptors.response.use((response: AxiosResponse) => {
    return response.data;
}, errorHandler);

export default request;

使用方法

import request from "@/utils/request";
interface DATA<T> {
  code: number, // 请求code值
  data: any, // 请求的data
  msg: string, // 请求返回的提示文字
  [propName: string]: any
}  
interface xxxParams {
  pageNo: number,
  pageSize: number,
}  
export function xxx<U>(data: xxxParams ): Promise<DATA<U>> {
  return request.request({
    url: `/api/XXX`,
    method: "POST",
  });
}

xxx(params).then(() => {})

如果没有强制要求 xxxParams可以用any替代