Vue 組件化的開發方式讓我們的前端開發變得更加靈活、高效，而在這個過程中，與後端進行資料互動是不可避免的。而 Axios 是一個很好的資料請求框架，它提供了方便的API接口，使用簡單、可靠、易於擴展等優點，於是我們選擇把它整合到Vue專案中。在本文中，我們將介紹如何將 Axios 封裝成實用的請求方法，以便在Vue元件中使用。
一般來說，我們使用Axios 傳送請求會涉及以下三個步驟：
// axios实例的默认配置
const instance = axios.create({
baseURL: '',
timeout: 5000,
headers: {
'Content-Type': 'application/json'
}
});instance.get('/api/getUser', {
params: {
id: 123
}
}).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})instance.interceptors.response.use(res => {
if (res.status === 200) {
return res.data;
} else {
throw new Error(res.status);
}
}, err => {
throw new Error(err);
})Axios 的使用非常簡單明了，但是如果每次在Vue 元件中使用時，都要重複編寫這些程式碼，既費時又容易出錯。所以，我們可以將其封裝成通用的請求方法：
我們可以採用Promise 這種非同步程式設計的方式，將Axios 請求封裝成通用方法，然後統一對傳回的結果進行處理。
import axios from 'axios';
axios.defaults.baseURL = '';
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.timeout = 5000;
// 请求拦截器
axios.interceptors.request.use(
config => {
// 将token添加到请求头中
if (localStorage.getItem('accessToken')) {
config.headers.Authorization = localStorage.getItem('accessToken');
}
return config;
},
error => {
return Promise.reject(error);
}
);
// 响应拦截器
axios.interceptors.response.use(
response => {
if (response.status === 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
error => {
if (error.response.status) {
switch (error.response.status) {
case 401:
// token过期，跳转到登录页
break;
case 404:
// 请求资源不存在
break;
default:
// 其他错误提示
break;
}
return Promise.reject(error.response);
}
}
)
export default function request(options) {
return new Promise((resolve, reject) => {
axios(options).then(res => {
resolve(res.data);
}).catch(error => {
reject(error);
})
})
}以上程式碼中，我們建立了一個 Axios 實例並設定其預設配置，同時也加入了請求和回應的攔截器。在封裝的請求方法中，我們使用 Promise 來傳回請求的結果。
將Axios 請求封裝成通用方法後，我們就可以在Vue 元件中使用它了，呼叫時只需要傳遞請求的基本參數：
import request from '@/utils/request';
export function fetchData() {
return request({
url: '/api/list',
method: 'get'
})
}同樣，支援GET、POST、PUT、DELETE、PATCH 等HTTP 方法的請求，只需在參數中指定不同的方法即可。
request({
url: '/api/user',
method: 'post',
data: {
username: 'admin',
password: '123456'
}
});
request({
url: '/api/user',
method: 'put',
params: {
id: 123
},
data: {
username: 'admin',
password: '123456'
}
});
request({
url: '/api/user',
method: 'delete',
params: {
id: 123
}
});本文透過 Axios 在 Vue 專案中的整合和封裝，詳細講解如何封裝 Axios 請求方法。這種封裝方式可以大幅減少重複程式碼的編寫量，提高開發效率，同時也方便對請求結果進行統一處理。在使用中，我們可以將其配置及攔截器按需調整、擴展，以滿足不同的需求。
以上是vue整合axios封裝請求的詳細內容。更多資訊請關注PHP中文網其他相關文章！
