Axios作為Vue生態中最流行的HTTP客戶端，以其簡潔的API和強大的功能成為前后端交互的首選方案。本文將帶你深入掌握Axios在Vue項目中的核心用法和高級技巧。

一、基礎配置

1. 安裝與引入

npm install axios

2. 全局掛載（main.js）

import axios from 'axios'
axios.defaults.baseURL = 'https://api.example.com'
Vue.prototype.$http = axios

3. 組件中使用

// GET請求
this.$http.get('/user?id=123').then(response => {console.log(response.data)})// POST請求
this.$http.post('/user', { name: 'John' })

二、核心功能

1. 請求/響應攔截器

// 請求攔截
axios.interceptors.request.use(config => {config.headers.Authorization = localStorage.getItem('token')return config
})// 響應攔截
axios.interceptors.response.use(response => response.data,error => {if (error.response.status === 401) {router.push('/login')}return Promise.reject(error)}
)

2. 并發請求

Promise.all([axios.get('/user/123'),axios.get('/posts?user=123')
]).then(([user, posts]) => {// 處理結果
})

三、高級技巧

1. 封裝Service層

// api/user.js
export default {login(data) {return axios.post('/auth/login', data)},getProfile() {return axios.get('/user/profile')}
}

2. 取消請求

const CancelToken = axios.CancelToken
let cancelaxios.get('/user', {cancelToken: new CancelToken(c => {cancel = c})
})// 取消請求
cancel()

3. 文件上傳

const formData = new FormData()
formData.append('file', file)axios.post('/upload', formData, {headers: {'Content-Type': 'multipart/form-data'}
})

四、最佳實踐

1. 環境配置：區分開發/生產環境API地址

2. 錯誤處理：統一錯誤碼處理

3. 性能優化：合理設置超時時間（建議5-10秒）

4. 安全措施：CSRF Token處理

五、與Vuex配合

actions: {async fetchUser({ commit }) {try {const { data } = await axios.get('/user')commit('SET_USER', data)} catch (error) {commit('SET_ERROR', error.message)}}
}

掌握這些技巧后，你將能夠：

• 實現優雅的API管理

• 處理復雜的網絡請求場景

• 構建更健壯的Vue應用

提示：對于大型項目，推薦使用axios的二次封裝，可以顯著提升代碼的可維護性。

希望這篇博客對你有所幫助，如果有任何問題和建議歡迎留言討論?