在Vue項目中封裝axios的最新方法
一、axios簡介
axios
是一個基于 XMLHttpRequest
的輕量級HTTP客戶端,適用于瀏覽器和Node.js環(huán)境。它提供以下特性:
- 創(chuàng)建XMLHttpRequests和HTTP請求
- 支持 Promise API
- 請求和響應攔截
- 數(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>
在項目中導入并使用:
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) { // 處理響應 }));
二、封裝axios的原因
雖然 axios
的API設計友好,但隨著項目規(guī)模增長,直接使用 axios
可能會導致以下問題:
- 重復編寫配置代碼,如超時時間、請求頭等。
- 難以維護的冗余代碼。
- 缺乏統(tǒng)一的錯誤處理。
因此,封裝axios
可以提高代碼質(zhì)量和可維護性。
三、封裝axios的方法
1. 設置接口請求前綴
根據(jù)不同環(huán)境(開發(fā)、測試、生產(chǎn))設置不同的請求前綴:
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ā)以實現(xiàn)跨域:
devServer: { proxy: { '/proxyApi': { target: 'http://dev.xxx.com', changeOrigin: true, pathRewrite: { '^/proxyApi': '' } } } }
2. 設置請求頭和超時時間
創(chuàng)建 axios
實例時,配置通用請求頭和超時時間:
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. 添加請求攔截器
在請求攔截器中添加通用邏輯,如設置token:
axios.interceptors.request.use(config => { const token = localStorage.getItem('token'); token && (config.headers.Authorization = token); return config; }, error => Promise.reject(error));
5. 添加響應攔截器
在響應攔截器中處理通用錯誤和業(yè)務邏輯:
axios.interceptors.response.use(response => { if (response.status === 200) { // 根據(jù)狀態(tài)碼處理業(yè)務邏輯 return Promise.resolve(response.data); } else { return Promise.reject(response); } }, error => { // 處理錯誤 return Promise.reject(error); });
小結(jié)
封裝 axios
是提升項目代碼質(zhì)量的重要手段。合理的封裝不僅能減少重復代碼,還能提高代碼的可維護性和可讀性。封裝方案應根據(jù)項目需求靈活設計。
到此這篇關于在Vue項目中封裝axios的最新方法的文章就介紹到這了,更多相關Vue封裝axios內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
element表格翻頁第2頁從1開始編號(后端從0開始分頁)
這篇文章主要介紹了element表格翻頁第2頁從1開始編號(后端從0開始分頁),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-12-12關于Vue?"__ob__:Observer"屬性的解決方案詳析
在操作數(shù)據(jù)的時候發(fā)現(xiàn),__ob__: Observer這個屬性出現(xiàn)之后,如果單獨拿數(shù)據(jù)的值,就會返回undefined,下面這篇文章主要給大家介紹了關于Vue?"__ob__:Observer"屬性的解決方案,需要的朋友可以參考下2022-11-11Vue reactive函數(shù)實現(xiàn)流程詳解
一個基本類型的數(shù)據(jù),想要變成響應式數(shù)據(jù),那么需要通過ref函數(shù)包裹,而如果是一個對象的話,那么需要使用reactive函數(shù),這篇文章主要介紹了Vue reactive函數(shù)2023-01-01Vue3中導入和使用圖標庫Font Awesome的實現(xiàn)步驟
Font Awesome 是互聯(lián)網(wǎng)的圖標庫和工具包,被數(shù)百萬設計師、開發(fā)人員和內(nèi)容創(chuàng)建者使用,Font Awesome的圖標非常豐富,基本涵蓋你所需要的所有,本文給大家介紹了Vue3中導入和使用圖標庫Font Awesome的具體步驟,需要的朋友可以參考下2025-01-01詳解vuex中action何時完成以及如何正確調(diào)用dispatch的思考
這篇文章主要介紹了詳解vuex中action何時完成以及如何正確調(diào)用dispatch的思考,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-01-01Vue3 Element Plus el-form表單組件示例詳解
這篇文章主要介紹了Vue3 Element Plus el-form表單組件,Element Plus 是 ElementUI 的升級版,提供了更多的表單控件和功能,同時還改進了一些細節(jié)和樣式,本文結(jié)合示例代碼給大家詳細講解,需要的朋友可以參考下2023-04-04如何在Vue中使用CleaveJS格式化你的輸入內(nèi)容
這篇文章主要介紹了如何在Vue中使用CleaveJS格式化你的輸入內(nèi)容,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-12-12