Vue3+TypeScript封装Axios实战：接口管理与类型安全返回

作者：异步漫步时间：2026-10-25 17:05:19浏览：626

本文介绍在Vue3项目中如何使用TypeScript对Axios进行二次封装。通过分离apiList接口定义、http实例初始化及拦截器配置，以及封装通用请求函数，实现接口路径与返回数据类型的严格约束。最终开发时可获得完整的接口提示与返回值类型推断，提升代码可维护性与开发效率。

本案例以Vue3项目为背景进行演示。

首先需搭建包含Vue3、TypeScript及Axios的项目环境，具体环境配置过程此处略过。

在src目录下创建必要的文件夹及对应文件，目录结构参考下图。

api模块用于集中保存所有接口列表及其对应的返回数据类型定义。
http模块负责初始化Axios实例，配置超时时间、请求拦截器等基础操作。
axios模块提供二次封装后的请求方法，供业务开发人员直接调用。

配置api.ts文件，定义接口映射与类型，示例如下。

/**
 * @description: 所有的接口列表
 * @param {*} 无参数
 * @return {*} 无返回值
 * ```js
 * key表示url路径缩写
 * value表示真实请求的路径
 * ```
 */
const apiList = {
  'getData': '/getData',
  'othersData': '/othersData'
}
/**
 * @description: 所有的接口列表类型
 * @param {*} 无参数
 * @return {*} 无返回值
 */
export type apiKeyType = keyof typeof apiList;
/**
 * @description: 接口对应的数据返回值类型
 * @param {*} 无参数
 * @return {*} 无返回值
 */
export interface apiKeyDataType {
  'getData': {
    code: number;
    data: {
      name: string;
      age: number;
      work: string[]
    }
  },
  'othersData': {
    code: number;
    data: string[]
  }
}

export default apiList;

配置http.ts文件，实现Axios实例创建与拦截器逻辑。

import axios, {Method, AxiosInstance, AxiosRequestConfig, AxiosPromise, AxiosInterceptorManager, AxiosResponse} from 'axios';
import qs from 'qs';
import {apiKeyType, apiKeyDataType} from './api';

type ResultDataType = apiKeyDataType[apiKeyType];
/* 
NewAxiosInstance接口得根据自己情况来定
  interceptors属性是必须要有，因为后续要用到拦截器
  至于<T = any>(config: AxiosRequestConfig): AxiosPromise<T>这一段代码，因为我后续二次封装axios时采用的是此类型，所以我这里
  声明的是这种数据类型
*/
interface NewAxiosInstance extends AxiosInstance {
  /* 
  设置泛型T，默认为any，将请求后的结果返回变成AxiosPromise<T>
  */
  <T = any>(config: AxiosRequestConfig): AxiosPromise<T>;
  interceptors: {
    request: AxiosInterceptorManager<AxiosRequestConfig>;
    response: AxiosInterceptorManager<AxiosResponse<ResultDataType>>;
  }
}

//基本的初始化设置
let http: NewAxiosInstance = axios.create({
  baseURL: import.meta.env.VITE_BASE_URL as string, //因为使用的是vite构建的项目，所以这里是这么获取代理名称的，根据自己情况修改
  timeout: 3 * 1000// 超时时间
});

// 请求拦截器
const QS_METHOD: Method[] = ['POST', 'post', 'PUT', 'put'];
const GET_METHOD: Method[] = ['GET', 'get', 'DELETE', 'delete'];
http.interceptors.request.use(response => {
  if(response.method && QS_METHOD.includes(response.method)){// 这里只处理post请求，根据自己情况修改
    response.data = qs.stringify(response.data);
  }else if(response.method && GET_METHOD.includes(response.method)){//设置GET的请求参数
  	response.params = qs.parse(response.data);
  	response.data = undefined;
  }
  return response;
}, error => {
  return error;
});

//响应拦截器
http.interceptors.response.use(response => {
  return Promise.resolve(response);
}, error => {
  return error;
});

export default http;

配置axios.ts文件，封装通用请求函数。

import axios from '@/server/http';
import apiList, {apiKeyType, apiKeyDataType} from './api';
import {AxiosRequestConfig} from 'axios';

/* 
限制泛型T必须是接口列表（apiKeyType）中的key
限制obj中的url必须是接口列表中key的某一格
*/
export default <T extends apiKeyType>(obj: AxiosRequestConfig & {url: T}) => {
  /* 
  限制最终的返回数据类型
  */
  return new Promise<apiKeyDataType[T]>((resolve, reject) => {
    /* 
    传递泛型给http中的拦截器
    */
    axios<apiKeyDataType[T]>({
      url: apiList[obj.url],
      data: obj.data || {},
      method: obj.method || 'GET',
      responseType: obj.responseType || 'json'
    }).then(res => {
      resolve(res.data);
    }).catch(error => {
      reject(error);
    })
  })
}