項目背景是vite搭建的vue3.0 + TypeScript 的項目，需要統一處理和統一維護就對axios進行了二次封裝

axios的安裝

npm install axios

定義http文件夾然后內部定義index.ts文件，內部開始封裝

import axios, {type AxiosInstance} from "axios"; // AxiosInstance (axios的配置好的類型定義)
import qs from 'qs'; // 引入qs處理字符串的解析和序列化
// 定義 promise 類型
interface Result<T> {code:number;message:string;data: T;total?: number;
}
export default class request {axiosFun: AxiosInstance;  // 聲明初始化的屬性constructor() {// 設置連接地址和超時時間還有憑證this.axiosFun = axios.create({timeout: 1000 * 60 * 5,baseURL: "http://localhost:8888/",withCredentials: true,});// 統一增加請求頭 也可以根據路徑判斷來添加請求頭this.axiosFun.interceptors.request.use((config:any)=>{config.headers.token = localStorage.token || '';  return config;});// 請求返回后的統一處理 在這里可以處理返回的不同狀態碼this.axiosFun.interceptors.response.use((res:any)=>{if (res.headers["content-disposition"]) {return res;}},(err:any)=>{return Promise.resolve(err)});}//get請求public static getFetch(url: string, data?: any): Promise<Result<object>> {return new Promise((resolve, reject) => {new request().axiosFun.get(url, { params: data }).then((result:any) => {resolve(result)}).catch((error:any) => {reject(error)})})}//post json請求public static postJson<T>(url: string, data?: any): Promise<Result<object>> {return new Promise((resolve, reject) => {new request().axiosFun.post(url, JSON.stringify(data), { headers: {'Content-Type': 'application/json;charset=UTF-8'} }).then((result:any) => {resolve(result)}).catch((error:any) => {reject(error)})})}//post formData請求public static postFormData(url: string, data?: any): Promise<Result<object>> {return new Promise((resolve, reject) => {new request().axiosFun.post(url, data,{ headers: {'Content-Type': 'multipart/form-data'} }).then((result:any) => {resolve(result)}).catch((error:any) => {reject(error)})})}//post 表單請求public static postFormUrlencoded(url: string, data?: any): Promise<Result<object>> {return new Promise((resolve, reject) => {new request().axiosFun.post(url, qs.stringify(data, {indices: false})).then((result:any) => {resolve(result)}).catch((error:any) => {reject(error)})})}//post json請求 返回blobpublic static postFileJson<T>(url: T, data?: any): Promise<Result<object>> {return new Promise((resolve, reject) => {new request().axiosFun.post(url as string, JSON.stringify(data), { headers: {'Content-Type': 'application/json;charset=UTF-8'},responseType:'blob' }).then((result:any) => {fileData(result);}).catch((error:any) => {reject(error)})})}//get 下載文件 返回blobpublic static getFileFetch(url: string, data?: any): Promise<Result<object>> {return new Promise((resolve, reject) => {new request().axiosFun.get(url, { params: data,responseType: "blob" }).then((result:any) => {fileData(result);}).catch((error:any) => {reject(error)})})}
}
// 封裝 a 標簽下載文件
const fileData = (result:any)=>{let fileName:string = result.headers['content-disposition'].split('fileName=')[1]fileName = decodeURIComponent(fileName)let blob:Blob = new Blob([result.data])const fileUrl:string = URL.createObjectURL(blob)const download:any = document.createElement('a')download.download = fileNamedownload.style.display = 'none'download.href = fileUrldocument.body.appendChild(download)download.click()document.body.removeChild(download)URL.revokeObjectURL(fileUrl)return
}

http文件夾定義modules文件夾再定義homeApi.ts文件

import request from "@/http/request";  // 引入封裝好的文件
export default class homeRequest {static messageList(params?: Object) {return request.postJson('/messageList', params)}
}

http文件夾內部定義api.ts文件

import HomeRequest from "@/http/modules/homeApi";
interface IHomeRequest {messageList(params?: Object): Promise<any>;
}
interface IApi {home: IHomeRequest;
}
export default class Api implements IApi {static home:IHomeRequest = HomeRequest
}

頁面調用

import api from "@/http/api";
interface allInfo {[key:string]:any
}
interface Result<T> {code:number;message:string;data: T;total?: number;
}
const {code,data} = api.home.messageList(params) as Result<allInfo>
if(code === 200) {console.log(data)
}