Vue3.0中Axios的使用指南与实战技巧

## 引言：为什么 Vue3 时代仍需要 Axios？
 
Vue3 带来了 Composition API、更好的 TypeScript 支持以及性能飞跃，但「如何优雅地发起 HTTP 请求」依旧是前端工程化的必答题。  
官方推荐的 fetch API 在浏览器端足够轻量，却缺少「超时中断」「请求/响应拦截」「自动 JSON 序列化」等能力。Axios 凭借 110 kB 的体积与丰富的生态，仍是 Vue3 项目的事实标准。  
本文将带你完成「基础配置 → 拦截器 → 错误处理 → TypeScript 类型推导 → 实战技巧」的闭环，并穿插展示 **TRAE IDE** 在「智能提示、代码片段、接口 Mock」等环节如何进一步提效，让网络请求代码写得快、跑得稳、可维护。
 
---
 
## 01｜安装与最小可运行示例
 
### 1.1 安装依赖
```bash
# 推荐锁定 1.x 最新版，避免 0.x 的 breaking change
npm i axios@^1.7
# 若使用 TypeScript
npm i -D @types/node  # 为 axios 内置类型补充 Node 全局变量

// plugins/axios.ts
import Axios from 'axios'
import type { App } from 'vue'
 
export const axiosKey = Symbol('axios')
 
export function install(app: App) {
  const instance = Axios.create({
    baseURL: import.meta.env.VITE_API_BASE, // 统一环境变量入口
    timeout: 10_000,
    headers: { 'X-Client': 'vue3' }
  })
  app.provide(axiosKey, instance)
}
 
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { install } from './plugins/axios'
 
const app = createApp(App)
install(app)
app.mount('#app')

<script setup lang="ts">
import { inject } from 'vue'
import type { AxiosInstance } from 'axios'
import { axiosKey } from '@/plugins/axios'
 
const http = inject<AxiosInstance>(axiosKey)!
// 直接使用 http.get / post ...
</script>

// plugins/axios.ts
instance.interceptors.request.use(
  config => {
    const token = localStorage.getItem('access_token')
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    // 统一驼峰转下划线（视后端规范）
    if (config.data && config.headers['Content-Type']?.includes('json')) {
      config.data = humps.decamelizeKeys(config.data)
    }
    return config
  },
  error => Promise.reject(error)
)

{ "code": 0, "msg": "ok", "data": {...} }

instance.interceptors.response.use(
  response => {
    const { code, msg, data } = response.data
    if (code === 0) return data
    // 业务异常
    ElMessage.error(msg) // ElementPlus
    return Promise.reject(new Error(msg))
  },
  error => {
    // HTTP 异常（超时、断网、500）
    handleNetworkError(error)
    return Promise.reject(error)
  }
)

export function handleNetworkError(err: any): void {
  const status: number = err.response?.status
  switch (status) {
    case 400:
      ElMessage.error('请求参数异常')
      break
    case 401:
      localStorage.clear()
      router.replace('/login')
      break
    case 403:
      ElMessage.warning('无权限操作')
      break
    case 404:
      ElMessage.error('接口不存在')
      break
    case 500:
    case 502:
      ElMessage.error('服务器开小差')
      break
    default:
      ElMessage.error('网络异常，请稍后重试')
  }
}

// types/api.ts
export interface LoginDTO {
  username: string
  password: string
}
 
export interface UserVO {
  id: number
  username: string
  avatar: string
}

// types/axios.d.ts
import 'axios'
declare module 'axios' {
  export interface AxiosResponse<T = any> {
    code: number
    msg: string
    data: T
  }
}

async function login(form: LoginDTO) {
  const user = await http.post<UserVO>('/login', form)
  // user 自动推导为 UserVO，无需 as
  avatarUrl.value = user.avatar
}

const pendingMap = new Map<string, AbortController>()
 
function genKey(config: InternalAxiosRequestConfig) {
  return `${config.method}-${config.url}-${JSON.stringify(config.params)}-${JSON.stringify(config.data)}`
}
 
instance.interceptors.request.use(config => {
  const key = genKey(config)
  const controller = new AbortController()
  config.signal = controller.signal
  if (pendingMap.has(key)) {
    pendingMap.get(key)!.abort()
  }
  pendingMap.set(key, controller)
  return config
})
 
instance.interceptors.response.use(
  res => {
    const key = genKey(res.config)
    pendingMap.delete(key)
    return res
  },
  err => {
    const key = genKey(err.config)
    pendingMap.delete(key)
    return Promise.reject(err)
  }
)