当前位置：首页 > news >正文

vue3.0 + TypeScript 中使用 axios 同时进行二次封装

news 2025/8/2 9:38:06

项目背景是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)
}