使用 Vue + Axios 構建與后端交互的高效接口調用方案

在 Vue 前端開發中，與后端接口的數據交互是非常核心的部分。而 Axios 是 Vue 項目中最常用的 HTTP 客戶端，具備基于 Promise、攔截器、自定義實例等諸多優勢。

本篇將深入介紹如何基于 Vue 搭配 Axios 構建一個高效、可維護、可復用的接口調用方案，并通過實戰案例逐步拆解。

---

一、為什么選擇 Axios？

Axios 相較于原生 fetch 或其他庫的優勢：

• 支持所有現代瀏覽器 + Node.js
• 自動轉換 JSON 數據
• 請求/響應攔截器
• 支持請求取消
• 支持上傳/下載進度監聽
• 更友好的錯誤處理方式

---

二、項目中引入 Axios

在 Vue 3 + Vite 項目中安裝 Axios：

npm install axios

或使用 Yarn：

yarn add axios

---

三、創建 Axios 實例（推薦）

在 src/utils/request.js 中統一配置 Axios 實例：

// src/utils/request.js
import axios from 'axios'// 創建實例
const request = axios.create({baseURL: '/api', // 可根據環境變量動態設置timeout: 5000
})// 請求攔截器
request.interceptors.request.use(config => {// 在發送請求之前可添加 token、語言設置等const token = localStorage.getItem('token')if (token) {config.headers['Authorization'] = `Bearer ${token}`}return config},error => Promise.reject(error)
)// 響應攔截器
request.interceptors.response.use(response => {// 可根據后端接口結構統一處理if (response.data.code !== 0) {return Promise.reject(response.data.message)}return response.data.data},error => {// 錯誤統一處理console.error('網絡請求錯誤：', error)return Promise.reject(error)}
)export default request

---

四、封裝 API 模塊

將不同接口按模塊組織，增強可維護性。

// src/api/user.js
import request from '@/utils/request'export function login(data) {return request.post('/user/login', data)
}export function getUserInfo() {return request.get('/user/info')
}

---

五、組件中調用接口

<template><div><p v-if="user">你好，{{ user.name }}</p><button @click="fetchUser">獲取用戶信息</button></div>
</template><script setup>
import { ref } from 'vue'
import { getUserInfo } from '@/api/user'const user = ref(null)const fetchUser = async () => {try {user.value = await getUserInfo()} catch (err) {console.error('獲取失敗：', err)}
}
</script>

---

六、環境變量與動態 BaseURL 設置

在 .env.development 和 .env.production 中配置：

VITE_API_BASE_URL=https://api.example.com

Axios 實例中動態引用：

const request = axios.create({baseURL: import.meta.env.VITE_API_BASE_URL,timeout: 5000
})

---

七、接口調用最佳實踐

實踐項	建議做法
封裝 axios 實例	集中管理請求配置
使用響應/請求攔截器	統一處理 token、錯誤提示、請求 loading 等
模塊化接口函數	每個功能模塊對應一個文件（如 user.js、post.js）
異常處理統一封裝	可封裝 tryCatch() 或 useRequest() Hook
接口參數校驗	在請求前進行基本字段判斷
自動重試/請求取消	可借助 axios-cancel-token、axios-retry 插件實現

---

八、封裝 useRequest Hook（高級優化）

封裝一個組合式 API 統一處理請求狀態：

// src/hooks/useRequest.js
import { ref } from 'vue'export function useRequest(apiFn) {const loading = ref(false)const error = ref(null)const data = ref(null)const run = async (...args) => {loading.value = trueerror.value = nulltry {data.value = await apiFn(...args)} catch (err) {error.value = err} finally {loading.value = false}}return { loading, error, data, run }
}

組件中使用：

<script setup>
import { useRequest } from '@/hooks/useRequest'
import { getUserInfo } from '@/api/user'const { data: user, loading, error, run: fetchUser } = useRequest(getUserInfo)fetchUser()
</script>

---

九、常見問題排查建議

1. 跨域問題
   使用 Vite 開發服務器的代理功能：

   // vite.config.js
   server: {proxy: {'/api': {target: 'https://api.example.com',changeOrigin: true,rewrite: path => path.replace(/^\/api/, '')}}
   }
   

2. 響應為 null 或 undefined
   檢查攔截器中是否錯誤地 return 了 response.data 而不是 response.data.data

3. token 失效未重定向登錄
   可在響應攔截器中判斷狀態碼為 401 后跳轉：

   if (response.status === 401) {window.location.href = '/login'
   }
   

---

十、總結

通過 Axios 與 Vue 的組合使用，我們不僅能夠實現基礎的請求功能，還可以構建出統一化、模塊化、易維護的接口調用架構。更進一步地，你還可以結合 Pinia/Vuex 管理數據、搭配組合式函數封裝 Hook，打造屬于你團隊的最佳實踐規范。