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替代