Vue 中的Axios請求封裝(修改版)
更新時間：2026年03月02日 10:48:21 作者：勇寶趣學(xué)前端
本文詳細介紹了在Vue項目中對axios進行簡單封裝的過程,包括安裝axios、封裝請求基文件、創(chuàng)建api文件夾、引入請求api并使用等步驟,通過封裝,可以統(tǒng)一處理請求,感興趣的朋友跟隨小編一起看看吧
在使用 Vue 開發(fā)我們的項目時，勢必要使用到
router，可能也會使用到vuex，但是我們肯定會使用到axios，對于初學(xué)者來說我們基本都是拿過來使用的，直接在main.js中進行導(dǎo)入即可。但是在真正做項目的時候，我們都是需要對axios進行請求封裝的，比如我們請求需要攜帶token，或者我們有多個環(huán)境：如測試環(huán)境、開發(fā)環(huán)境等…
這里主要記錄一下axios的簡單封裝。
一、準(zhǔn)備階段
初始化項目
? 安裝 Vue 這里就不開展說了,我們重創(chuàng)建一個
Vue項目開始。
Vue create my-project cd my-project # 進入項目目錄 yarn # 安裝依賴，也可以使用 npm install yarn serve # 啟動項目
安裝 axios
?項目創(chuàng)建完成后，我們開始安裝
axios。
yarn add axios -S
-D： --save-dev 的簡寫，模塊寫入到devDependencies對象。
devDependencies對象，是我們開發(fā)的時候需要用到的一些包，只用于開發(fā)階段，真正打包上線的時候并不需要這些包，因為這些工具只是你用來打包代碼的 。
-S： --save 的簡寫，模塊寫入到dependencies對象。
- 需要發(fā)布到生產(chǎn)環(huán)境中的，就比如你要跑一個基于
vue的項目，所以需要vue.js來支持，vue.js 文件就需要跟隨項目到最終的生產(chǎn)環(huán)境。
二、axios 引入
簡單引入
? 如上所說，我們安裝完
axios可以直接進行使用。
在 main.js 中導(dǎo)入 axios
import axios from 'axios'
// 全局掛載
Vue.prototype.$axios = axios
// 設(shè)置默認(rèn)路由前綴
axios.defaults.baseURL = 'http://localhost:8080'
new Vue({
axios,
router,
store,
render: h => h(app)
}).$mount('#app')在.vue文件中使用
<script>
methods:{
Login () {
this.$axios({
url:'/login',
method: 'post',
data:{
userName:'xxxx',
password:'xxxx'
}
}).then((res)=>{
console.log(res)
})
}
}
</script>三、封裝 axios 請求
? 我們不在
main.js中進行引入。
1. 根目錄下配置不同環(huán)境所需接口基址
- .env 全局默認(rèn)配置文件，不論什么環(huán)境都會加載合并
- .env.development 開發(fā)環(huán)境下的配置文件
- .env.production 生產(chǎn)環(huán)境下的配置文件
- .env.local 本地開發(fā)環(huán)境配置
- 命名規(guī)則：
屬性名必須以VUE_APP_開頭，比如VUE_APP_XXX
# 本地開發(fā)環(huán)境配置(.env.local) NODE_ENV=development # base url VUE_APP_API_BASE_URL=http://xx.xx.xx.xxx:8080/xxx VUE_APP_FORM_BASE_URL=http://xx.xx.xx.xxx:8080/xxx VUE_APP_SIGN_OFF_BASE_URL=http://xx.xx.xx.xxx:8080/xxx VUE_APP_LOGIN_BASE_URL=http://xx.xx.xx.xxx:8080/xxx VUE_APP_SSO_BASE_URL=http://xx.xx.xx.xxx:8080/xxx // 測試服client-id # VUE_APP_SSO_CLIENT_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx // 本地client-id VUE_APP_SSO_CLIENT_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx VUE_APP_FILE_SERVER_BASE_URL=http://xx.xx.xx.xxx:8080/xxx
2. 封裝請求基文件
? 在 src 目錄下創(chuàng)建
src/tools/http/request.js
// src/tools/http/request.js
import axios from 'axios'
import { Message} from 'element-ui' // 引入 Element 組件
export default function request ({ type='COMMOn',data }){
let baseUrl = process.env.VUE_APP_API_BASE_URL // 這是配置的 .env 文件
switch (type) {
case 'COMMON':
baseUrl = process.env.VUE_APP_API_BASE_URL
break;
case 'LOGIN':
baseUrl = process.env.VUE_APP_LOGIN_BASE_URL
break;
case 'FROM':
baseUrl = process.env.VUE_APP_FORM_BASE_URL
break;
default:
break;
}
console.log('baseUrl', process.env)
const service = axios.create({
baseURL: baseUrl,
timeout: 5000
})
// 請求攔截器
service.interceptors.request.use(config => {
//發(fā)請求前做的一些處理，數(shù)據(jù)轉(zhuǎn)化，配置請求頭，設(shè)置token,設(shè)置loading等，根據(jù)需求去添加
config.data = JSON.stringify(config.data); //數(shù)據(jù)轉(zhuǎn)化,也可以使用qs轉(zhuǎn)換
config.headers = {
'Content-Type':'application/x-www-form-urlencoded' //配置請求頭
}
//注意使用token的時候需要引入cookie方法或者用本地localStorage等方法，推薦js-cookie
const token = getCookie('名稱');//這里取token之前，你肯定需要先拿到token,存一下
if(token){
config.params = {'token':token} //如果要求攜帶在參數(shù)中
config.headers.token= token; //如果要求攜帶在請求頭中
}
return config
}, error => {
Promise.reject(error)
})
// 響應(yīng)攔截器
service.interceptors.response.use(response => {
return response
}, error => {
Message.error(error.message)
return Promise.resolve(error.response)
}
return service(data)
}四、請求數(shù)據(jù)
1. 創(chuàng)建api文件夾
? 在
src目錄下創(chuàng)建api文件夾，放置每個請求模塊的方法，以后所有的請求寫在這個文件夾下邊，比如我們系統(tǒng)有一個角色配置模塊。
創(chuàng)建src/api/role-config.js
// src/api/role-config.js
import request from '@/tools/http/request'
// 獲取角色列表的 api
export function getRoleListsApi (data) { // 接口需要的 data 數(shù)據(jù)
return request ({
data:{
url:'/roleList',
method:'post',
data
}
})
}3. 引入請求 api
Role.vue組件進行請求數(shù)據(jù)
<script>
import { getRoleListsApi } from '@/api/role-config.js'
export default {
name: 'Role',
data (){
return {
roleList: [] // 存儲需要渲染的數(shù)據(jù)
}
},
methods:{
// 獲取角色列表
async getRoleList () {
const obj = { roleid:'普通會員' }
const { roleList, code } = await getRoleListsApi(obj)
if(code === 200){
this.roleList = roleList
}
}
}
}
</script>五、啟動項目
? 在開發(fā)環(huán)境下啟動項目
1. 配置 package.json
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"local": "vue-cli-service build --mode local", // 新加的
},
2. 打開命令行
yarn local # 運行項目
總結(jié)
拖了有三天了，今天終于把這一塊梳理清楚了，我承認(rèn)自己懶了，這幾天工作上相對比較忙，可能國慶回來會好一點吧！今天通過對
axios請求簡單的封裝，讓我對模塊化有了一個新的認(rèn)識，最有我想說的是，有的時候踏下心來做成一件事情真的很開心，事情可大可小，但完成的過程真的是發(fā)自內(nèi)心的高興。有些人說自己一定要做大事才能定義一個人的成功，但是每一次付出的小事不正是我們向成功靠近的基石嗎。
到此這篇關(guān)于Vue 之 Axios請求封裝（修改版）的文章就介紹到這了,更多相關(guān)Vue Axios請求封裝內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue elementui表格獲取某行數(shù)據(jù)(slot-scope和selection-change方法使用)
這篇文章主要介紹了vue elementui表格獲取某行數(shù)據(jù)(slot-scope和selection-change方法使用),本文通過示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
第一次使用webstrom簡單創(chuàng)建vue項目的一些報錯實戰(zhàn)記錄
在使用webstorm新建vue項目時常會遇到一些報錯,特別是新手第一次運行項目,這篇文章主要給大家介紹了關(guān)于第一次使用webstrom簡單創(chuàng)建vue項目的一些報錯實戰(zhàn)記錄,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了使用vue-upload上傳圖片的詳細使用說明，文中有相關(guān)的代碼示例供大家參考，感興趣的小伙伴一起跟著小編來學(xué)習(xí)吧2023-05-05
vue3提供了 mixins和extends，但是嘗試之后發(fā)現(xiàn)這兩種方法只支持純OptionAPI，設(shè)置的data會被識別，但是設(shè)置的setup里return 的 reactive，完全無效，setup也沒有被執(zhí)行，這篇文章主要介紹了Vue3實現(xiàn)組件級基類的幾種方法,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了詳解在vue-test-utils中mock全局對象，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
Vue計算屬性與監(jiān)視(偵聽)屬性的使用深度學(xué)習(xí)
這篇文章主要介紹了Vue計算屬性與監(jiān)視(偵聽)屬性的使用,計算屬性指的是通過一系列運算之后，最終得到一個值，watch監(jiān)視(偵聽)器允許開發(fā)者監(jiān)視數(shù)據(jù)的變化，從而針對數(shù)據(jù)的變化做特定的操作，本文就這兩種屬性給大家詳細講解，感興趣的朋友一起學(xué)習(xí)吧2022-11-11
karma+webpack搭建vue單元測試環(huán)境的方法示例
本篇文章主要介紹了karma+webpack搭建vue單元測試環(huán)境的方法示例，這次搭建的測試環(huán)境和開發(fā)環(huán)境隔離，所以理論上適用所有使用vue的開發(fā)環(huán)境。感興趣的小伙伴們可以參考一下2018-05-05
vite官方文檔中有關(guān)于多頁面應(yīng)用模式如果配置的說明,下面這篇文章主要給大家介紹了關(guān)于vite多頁面配置的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-04-04
vue通過watch對input做字?jǐn)?shù)限定的方法
本篇文章主要介紹了vue通過watch對input做字?jǐn)?shù)限定的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
Vue?+?Android?WebView實現(xiàn)大文件PDF預(yù)覽完整解決方案(附詳細代碼)
這篇文章主要介紹了Vue?+?Android?WebView實現(xiàn)大文件PDF預(yù)覽完整解決方案的相關(guān)資料,解決了在AndroidWebView環(huán)境下預(yù)覽大文件PDF的問題,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-12-12