在Vue項(xiàng)目中封裝axios的最新方法
一、axios簡介
axios 是一個基于 XMLHttpRequest 的輕量級HTTP客戶端，適用于瀏覽器和Node.js環(huán)境。它提供以下特性：
- 創(chuàng)建XMLHttpRequests和HTTP請求
- 支持 Promise API
- 請求和響應(yīng)攔截
- 數(shù)據(jù)轉(zhuǎn)換
- 取消請求
- 自動轉(zhuǎn)換JSON數(shù)據(jù)
- 客戶端XSRF防御
Vue 2.0起，官方推薦使用axios替代vue-resource。
基本使用
安裝 axios：
npm install axios --S
或通過CDN引入：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
在項(xiàng)目中導(dǎo)入并使用：
import axios from 'axios';
axios({
url: 'xxx',
method: 'GET',
params: {
type: '',
page: 1
}
}).then(res => {
console.log(res);
});
并發(fā)請求：
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (res1, res2) {
// 處理響應(yīng)
}));
二、封裝axios的原因
雖然 axios 的API設(shè)計(jì)友好，但隨著項(xiàng)目規(guī)模增長，直接使用 axios 可能會導(dǎo)致以下問題：
- 重復(fù)編寫配置代碼，如超時時間、請求頭等。
- 難以維護(hù)的冗余代碼。
- 缺乏統(tǒng)一的錯誤處理。
因此，封裝axios可以提高代碼質(zhì)量和可維護(hù)性。
三、封裝axios的方法
1. 設(shè)置接口請求前綴
根據(jù)不同環(huán)境（開發(fā)、測試、生產(chǎn)）設(shè)置不同的請求前綴：
if (process.env.NODE_ENV === 'development') {
axios.defaults.baseURL = 'http://dev.xxx.com';
} else if (process.env.NODE_ENV === 'production') {
axios.defaults.baseURL = 'http://prod.xxx.com';
}
在 vue.config.js 中配置代理轉(zhuǎn)發(fā)以實(shí)現(xiàn)跨域：
devServer: {
proxy: {
'/proxyApi': {
target: 'http://dev.xxx.com',
changeOrigin: true,
pathRewrite: {
'^/proxyApi': ''
}
}
}
}
2. 設(shè)置請求頭和超時時間
創(chuàng)建 axios 實(shí)例時，配置通用請求頭和超時時間：
const service = axios.create({
timeout: 30000,
headers: {
'Content-Type': 'application/json;charset=utf-8'
}
});
3. 封裝請求方法
封裝 GET 和 POST 請求方法，便于統(tǒng)一管理和使用：
export function httpGet({ url, params = {} }) {
return new Promise((resolve, reject) => {
axios.get(url, { params }).then(res => resolve(res.data)).catch(err => reject(err));
});
}
export function httpPost({ url, data = {}, params = {} }) {
return new Promise((resolve, reject) => {
axios({ url, method: 'post', data, params }).then(res => resolve(res.data)).catch(err => reject(err));
});
}
將封裝的方法放在 api.js 文件中，便于統(tǒng)一管理：
import { httpGet, httpPost } from './http';
export const getorglist = (params = {}) => httpGet({ url: 'apps/api/org/list', params });
在頁面中直接調(diào)用：
import { getorglist } from '@/assets/js/api';
getorglist({ id: 200 }).then(res => {
console.log(res);
});
4. 添加請求攔截器
在請求攔截器中添加通用邏輯，如設(shè)置token：
axios.interceptors.request.use(config => {
const token = localStorage.getItem('token');
token && (config.headers.Authorization = token);
return config;
}, error => Promise.reject(error));
5. 添加響應(yīng)攔截器
在響應(yīng)攔截器中處理通用錯誤和業(yè)務(wù)邏輯：
axios.interceptors.response.use(response => {
if (response.status === 200) {
// 根據(jù)狀態(tài)碼處理業(yè)務(wù)邏輯
return Promise.resolve(response.data);
} else {
return Promise.reject(response);
}
}, error => {
// 處理錯誤
return Promise.reject(error);
});
小結(jié)
封裝 axios 是提升項(xiàng)目代碼質(zhì)量的重要手段。合理的封裝不僅能減少重復(fù)代碼，還能提高代碼的可維護(hù)性和可讀性。封裝方案應(yīng)根據(jù)項(xiàng)目需求靈活設(shè)計(jì)。
到此這篇關(guān)于在Vue項(xiàng)目中封裝axios的最新方法的文章就介紹到這了,更多相關(guān)Vue封裝axios內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)通知或詳情類彈窗，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
vue實(shí)現(xiàn)簡單表格組件實(shí)例詳解
vue的核心思想就是組件，什么是組件呢？按照我的理解組件就是裝配頁面的零件，vue三大核心組件 路由 狀態(tài)管理，路由控制頁面的渲染，頁面由組件組成，數(shù)據(jù)有vuex進(jìn)行管理和改變。下面我會以一個簡單的案例來說2017-04-04
Vue3?$emit用法指南(含選項(xiàng)API、組合API及?setup?語法糖)
這篇文章主要介紹了Vue3?$emit用法指南,使用?emit，我們可以觸發(fā)事件并將數(shù)據(jù)傳遞到組件的層次結(jié)構(gòu)中，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-07-07
這篇文章主要介紹了如何設(shè)置Vue全局公共方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
部屬vue項(xiàng)目,訪問路徑設(shè)置非根,顯示白屏的解決方案
這篇文章主要介紹了部屬vue項(xiàng)目,訪問路徑設(shè)置非根,顯示白屏的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
使用sessionStorage解決vuex在頁面刷新后數(shù)據(jù)被清除的問題
localStorage沒有時間期限，除非將它移除，sessionStorage即會話，當(dāng)瀏覽器關(guān)閉時會話結(jié)束，有時間期限，具有自行百度。本文使用的是sessionStorage解決vuex在頁面刷新后數(shù)據(jù)被清除的問題,需要的朋友可以參考下2018-04-04
教你在vue項(xiàng)目中使用svg圖標(biāo)的方法
本文給大家介紹了在vue項(xiàng)目中使用svg圖標(biāo)的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2022-04-04
這篇文章主要介紹了vue實(shí)現(xiàn)可拖拽div大小的方法,可封裝為全局方法在項(xiàng)目中所需要地方直接調(diào)用（mixins），本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-04-04
class 與 style 綁定就是專門用來實(shí)現(xiàn)動態(tài)樣式效果的技術(shù),如果需要動態(tài)綁定 class 或 style 樣式,可以使用 v-bind 綁定,本文給大家講解Vue 綁定style和class樣式,感興趣的朋友一起看看吧2023-10-10
VUE2.0+ElementUI2.0表格el-table循環(huán)動態(tài)列渲染的寫法詳解
這篇文章主要介紹了VUE2.0+ElementUI2.0表格el-table循環(huán)動態(tài)列渲染的寫法詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11