在Vue項(xiàng)目中封裝axios的最新方法
一、axios簡(jiǎn)介
axios
是一個(gè)基于 XMLHttpRequest
的輕量級(jí)HTTP客戶端,適用于瀏覽器和Node.js環(huán)境。它提供以下特性:
- 創(chuàng)建XMLHttpRequests和HTTP請(qǐng)求
- 支持 Promise API
- 請(qǐng)求和響應(yīng)攔截
- 數(shù)據(jù)轉(zhuǎn)換
- 取消請(qǐng)求
- 自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)
- 客戶端XSRF防御
Vue 2.0起,官方推薦使用axios
替代vue-resource
。
基本使用
安裝 axios
:
npm install axios --S
或通過(guò)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ā)請(qǐng)求:
axios.all([getUserAccount(), getUserPermissions()]) .then(axios.spread(function (res1, res2) { // 處理響應(yīng) }));
二、封裝axios的原因
雖然 axios
的API設(shè)計(jì)友好,但隨著項(xiàng)目規(guī)模增長(zhǎng),直接使用 axios
可能會(huì)導(dǎo)致以下問(wèn)題:
- 重復(fù)編寫配置代碼,如超時(shí)時(shí)間、請(qǐng)求頭等。
- 難以維護(hù)的冗余代碼。
- 缺乏統(tǒng)一的錯(cuò)誤處理。
因此,封裝axios
可以提高代碼質(zhì)量和可維護(hù)性。
三、封裝axios的方法
1. 設(shè)置接口請(qǐng)求前綴
根據(jù)不同環(huán)境(開發(fā)、測(cè)試、生產(chǎn))設(shè)置不同的請(qǐng)求前綴:
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è)置請(qǐng)求頭和超時(shí)時(shí)間
創(chuàng)建 axios
實(shí)例時(shí),配置通用請(qǐng)求頭和超時(shí)時(shí)間:
const service = axios.create({ timeout: 30000, headers: { 'Content-Type': 'application/json;charset=utf-8' } });
3. 封裝請(qǐng)求方法
封裝 GET
和 POST
請(qǐng)求方法,便于統(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 });
在頁(yè)面中直接調(diào)用:
import { getorglist } from '@/assets/js/api'; getorglist({ id: 200 }).then(res => { console.log(res); });
4. 添加請(qǐng)求攔截器
在請(qǐng)求攔截器中添加通用邏輯,如設(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)攔截器中處理通用錯(cuò)誤和業(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 => { // 處理錯(cuò)誤 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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
element表格翻頁(yè)第2頁(yè)從1開始編號(hào)(后端從0開始分頁(yè))
這篇文章主要介紹了element表格翻頁(yè)第2頁(yè)從1開始編號(hào)(后端從0開始分頁(yè)),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12關(guān)于Vue?"__ob__:Observer"屬性的解決方案詳析
在操作數(shù)據(jù)的時(shí)候發(fā)現(xiàn),__ob__: Observer這個(gè)屬性出現(xiàn)之后,如果單獨(dú)拿數(shù)據(jù)的值,就會(huì)返回undefined,下面這篇文章主要給大家介紹了關(guān)于Vue?"__ob__:Observer"屬性的解決方案,需要的朋友可以參考下2022-11-11Vue reactive函數(shù)實(shí)現(xiàn)流程詳解
一個(gè)基本類型的數(shù)據(jù),想要變成響應(yīng)式數(shù)據(jù),那么需要通過(guò)ref函數(shù)包裹,而如果是一個(gè)對(duì)象的話,那么需要使用reactive函數(shù),這篇文章主要介紹了Vue reactive函數(shù)2023-01-01解決vite打包后白屏之router-view不生效問(wèn)題
這篇文章主要介紹了解決vite打包后白屏之router-view不生效問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07Vue3中導(dǎo)入和使用圖標(biāo)庫(kù)Font Awesome的實(shí)現(xiàn)步驟
Font Awesome 是互聯(lián)網(wǎng)的圖標(biāo)庫(kù)和工具包,被數(shù)百萬(wàn)設(shè)計(jì)師、開發(fā)人員和內(nèi)容創(chuàng)建者使用,Font Awesome的圖標(biāo)非常豐富,基本涵蓋你所需要的所有,本文給大家介紹了Vue3中導(dǎo)入和使用圖標(biāo)庫(kù)Font Awesome的具體步驟,需要的朋友可以參考下2025-01-01Vue3項(xiàng)目中reset.scss模板使用導(dǎo)入
這篇文章主要為大家介紹了Vue3項(xiàng)目中reset.scss模板使用導(dǎo)入示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09詳解vuex中action何時(shí)完成以及如何正確調(diào)用dispatch的思考
這篇文章主要介紹了詳解vuex中action何時(shí)完成以及如何正確調(diào)用dispatch的思考,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01Vue3 Element Plus el-form表單組件示例詳解
這篇文章主要介紹了Vue3 Element Plus el-form表單組件,Element Plus 是 ElementUI 的升級(jí)版,提供了更多的表單控件和功能,同時(shí)還改進(jìn)了一些細(xì)節(jié)和樣式,本文結(jié)合示例代碼給大家詳細(xì)講解,需要的朋友可以參考下2023-04-04如何在Vue中使用CleaveJS格式化你的輸入內(nèi)容
這篇文章主要介紹了如何在Vue中使用CleaveJS格式化你的輸入內(nèi)容,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12