Vue3+TS封装Axios请求全攻略

今天花了一点时间复习了Vue3结合TypeScript封装Axios请求的知识点，整理成笔记方便后续回顾，也希望能帮到正在学习axios与vue的你们～

前言

在 Vue3+TypeScript 项目中，Axios是最常用的网络请求库，直接使用会导致代码冗余、难以维护。因此我们需要对Axios进行基础封装：创建实例、配置拦截器、定义统一的数据类型。这是前端项目中最基础、最核心的请求规范，也是今天回顾的重点。

一、前置准备

首先必不可少的是先安装 Axios 依赖：

TypeScript 复制代码

npm install axios --save

二、核心：Axios 实例与通用类型封装（index.ts）

这一步是基础，我们把 Axios 的通用配置、拦截器、响应类型都抽离到index.ts中，方便全局复用。

1. 创建 Axios 实例

首先创建 axios 实例，配置超时时间、基准地址（baseURL）：

TypeScript 复制代码

import axios from 'axios';

// 创建axios实例
export const useAxios = axios.create({
    timeout:6000, // 超时时间6秒
    baseURL:''// 如果前端配了代理（比如Vite的proxy），这里可以不填，避免跨域问题
})

2. 请求 / 响应拦截器

拦截器是 Axios 的精髓！可以统一处理请求头、响应数据，不用在每个请求里重复写逻辑

TypeScript 复制代码

// 请求拦截器：给所有请求加token
useAxios.interceptors.request.use((config)=>{
    config.headers['token'] = '123456' // 这里仅作演示
    return config
})

// 响应拦截器：统一处理后端返回的数据，直接返回data层
useAxios.interceptors.response.use((config)=>{  
    return config.data // 这样后续调用接口时，拿到的就是后端返回的原始数据，不用再拆res.data
})

3. 定义通用响应类型

后端返回的数据一般有固定格式（比如**code** 状态码、data 数据体、**message**提示信息），用 TypeScript 的泛型接口约束，适配不同接口的返回数据：

TypeScript 复制代码

// 通用响应类型：泛型T让data可以适配任意数据结构
export interface baseResponse<T>{
    code:number, // 状态码：比如0成功，非0失败
    data:T,      // 实际返回的业务数据
    message:string // 提示信息
}

三、封装具体业务接口（data_api.ts）

有了通用封装后，我们针对具体的业务接口做封装，重点是用 TS 约束请求返回的数据类型～

1. 定义接口数据类型

先明确这个接口返回的每一条数据长什么样，定义**dataType**接口：

TypeScript 复制代码

// 定义单条数据的类型
export interface dataType {
    "id": string,
    "name": string,
    "addr": string,
    "avatar": string,
    "ip": string
}

2. 封装 GET 请求函数

封装具体的请求函数，指定返回类型为**Promise<baseResponse<dataType[]>>**（因为返回的是数组，所以 dataType \[\]）：

TypeScript 复制代码

import  {type baseResponse,useAxios} from "./index"

// 封装获取数据的GET请求
export function get_data_api():Promise<baseResponse<dataType[]>> {
    return useAxios.get('/api/get_data') // 接口路径根据实际后端地址调整
}

四、Vue3 组件中调用接口（App.vue）

最后一步就是在组件里调用封装好的接口，渲染数据。

1. 核心代码解析

TypeScript 复制代码

<script setup lang="ts">
// 导入封装的接口函数和数据类型
import { get_data_api,type dataType } from './api/data_api'
import { ref } from 'vue';

// 定义响应式数据，指定类型为dataType[]，初始值为空数组
const data = ref<dataType[]>([])

// 异步函数调用接口
async function get_data(){
  const res = await get_data_api()
  console.log(res); // 这里的res已经是baseResponse类型啦（因为响应拦截器处理过）
  
  // 业务逻辑：比如code为0表示请求成功（根据后端约定调整）
  if(res.code !== 0){
    return // 失败则直接返回，可加提示语
  }
  
  // 给响应式数据赋值
  data.value = res.data
  
  // 如果用reactive定义数据，要这样赋值：
  // const data = reactive<dataType[]>([])
  // Object.assign(data,res.data)
}

// 页面加载时调用接口
get_data()
</script>

<template>
  <div>
    <!-- 遍历响应式数据，渲染每一条数据 -->
    <div v-for="item in data" :key="item.id">
      <div>姓名：{{item.name}}</div>
      <div>地址：{{item.addr}}</div>
      <div>头像：{{item.avatar}}</div>
      <div>IP：{{item.ip}}</div>
    </div>
  </div>
</template>

2. 关键注意点

响应式数据类型：用ref<dataType[]>([])明确类型，避免TS报错；
异步处理：**async/await**处理接口请求，比.then 更直观；
类型安全：从接口封装到组件调用，全程有 TS 类型约束，写错字段（比如把 item.name 写成 item.nam）会直接报错，提前规避 bug～

五、总结

封装的意义：把 Axios 的通用逻辑（拦截器、响应类型）抽离，业务接口单独封装，后续改接口地址、加请求头只需要改一处，维护性拉满；
TypeScript的价值：通过接口、泛型约束数据类型，不仅自己写代码有提示，团队协作时别人也能快速看懂数据结构；
Vue3 组合式API：setup语法中调用异步请求很丝滑，ref/reactive 的响应式处理要分清场景（数组/简单类型用ref，复杂对象用reactive）。

接口请求是前端项目的核心环节之一，而Axios 是最常用的请求库，结合TypeScript的类型安全特性，再搭配Vue3的组合式API，能让前端请求逻辑更规范、更简单明了。这些知识点是前端项目中最基础也最核心的部分，也是打通前后端不可或缺的部分，速速动起手来，敲一遍熟练熟练。