vue新建環(huán)境變量以及網(wǎng)絡(luò)請求工具axios的二次封裝詳解
1. 【環(huán)境變量】背景:
- 在我們的實(shí)際項(xiàng)目開發(fā)中,一般會區(qū)分幾個環(huán)境,分別是
開發(fā)環(huán)境、測試環(huán)境和生產(chǎn)環(huán)境,當(dāng)然不排除分的比較細(xì)的還有預(yù)發(fā)布環(huán)境,一般來說這四個環(huán)境就足夠我們使用了。
2. 新建環(huán)境步驟:
2.1 在根目錄下新建4個環(huán)境變量文件:
.env.dev【開發(fā)環(huán)境】.env.test【測試環(huán)境】.env.uat【預(yù)發(fā)布環(huán)境】.env.prod【生產(chǎn)環(huán)境】- 四個環(huán)境內(nèi)的文件內(nèi)容如下:
//.env.dev文件 NODE_ENV = dev # base url VUE_APP_BASE_URL = "https://dev.it98k.cn" -------------------------------------------------------------- //.env.test文件 NODE_ENV = test # base url VUE_APP_BASE_URL = "https://test.it98k.cn" -------------------------------------------------------------- //.env.uat文件 NODE_ENV = uat # base url VUE_APP_BASE_URL = "https://uat.it98k.cn" -------------------------------------------------------------- //.env.prod文件 NODE_ENV = prod # base url VUE_APP_BASE_URL = "https://prod.it98k.cn" --------------------------------------------------------------
2.2 修改package.json【scripts】下的啟動命令:
"scripts": {
"serve": "vue-cli-service serve --mode dev",
"build:test": "vue-cli-service build --mode test",
"build:uat": "vue-cli-service build --mode uat",
"build:prod": "vue-cli-service build --mode prod"
},- 這樣修改完,本地啟動項(xiàng)目命令依然是:
npm run serve - 打包測試環(huán)境的命令是:
npm run build:test - 打包預(yù)發(fā)布環(huán)境的命令是:
npm run build:uat - 打包生產(chǎn)環(huán)境的命令是:
npm run build:prod
3. 【基于axios的二次封裝】背景:
- 在實(shí)際開發(fā)項(xiàng)目中,網(wǎng)絡(luò)請求基本上使用axios網(wǎng)絡(luò)請求工具,但是單純的使用像
axios.get('http://xxxxx.com')來請求接口,隨著項(xiàng)目越來越大,頁面越來越多,功能越來越完善,我們勢必會寫大量的axios請求,每次都這么寫,費(fèi)時費(fèi)力,也不方便統(tǒng)一管理,所以,需要將axios進(jìn)行二次封裝,以達(dá)到我們開發(fā)項(xiàng)目的時候省時、省力、省心。
3.1新建utils/request.js文件
第一步,在src目錄下,新建utils/request.js文件,文件內(nèi)容如下:
//首先引入axios
import axios from 'axios'
//然后通過create方法來創(chuàng)建一個請求服務(wù)
//然后create方法內(nèi)有一些配置項(xiàng),比如接口域名`baseURL`、接口請求超時時間`timeout`
//接口url`url`
//接口請求方式`method`等等,需要我們按需傳入
// create an axios instance
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_URL, // 完整的api地址 = 接口域名+ 接口路徑
timeout: 5000 // 請求超時時間 5s
})
//下面會定義兩個攔截器,分別是 `請求攔截器`,`響應(yīng)攔截器`
//`請求攔截器`是前端請求后端接口前處理的一些邏輯,比如開啟loading,配置header請求頭等等
//`響應(yīng)攔截器`就是后端響應(yīng)我們前端,返回回來的數(shù)據(jù),比如我們可以在這響應(yīng)攔截器內(nèi)拿到status Code
//拿到后端接口返回的code,關(guān)閉loading、根據(jù)code碼處理一些詳細(xì)的邏輯等等一系列操作
//request interceptor 請求攔截器
service.interceptors.request.use(
config => {
// do something before request is sent。在發(fā)送請求之前做一些事情
config.headers['token'] = "xxxxxx"
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
// response interceptor 響應(yīng)攔截器
service.interceptors.response.use(
response => {
const res = response.data
// if the custom code is not 20000, it is judged as an error.
if (res.code !== 200) {
alert(res.message || 'Error')
return Promise.reject(new Error(res.message || 'Error'))
} else {
return res
}
},
error => {
console.log('err' + error) // for debug
alert(res.message || 'Error')
return Promise.reject(error)
}
)
// 最后暴露我們聲明的 service 服務(wù)
export default service4. api的封裝與使用
- api請求方法,也是要做一個封裝的,封裝流程如下
4.1 在src目錄下新建api/index.js文件
文件內(nèi)容如下:
import request from '../utils/request';
//登錄接口,post方式傳參用data
export function login(data) {
return request({
url: '/api/login',
method: 'post',
data
})
}
//獲取xx列表接口,get方式傳參用params
export function getList(params) {
return request({
url: '/api/getList',
method: 'get',
params
})
}
4.2 使用封裝好的api
在需要的頁面,比如我們的登錄頁面需要調(diào)用登錄接口,我們就要這樣用
//首先第一步要用import導(dǎo)入進(jìn)來我們的登錄接口
import { login } from '../api/index'
//然后直接調(diào)用login方法
login({username:'admin',password:"123456"}).then(res=>{
console.log(res);
})以上就是vue新建環(huán)境變量以及網(wǎng)絡(luò)請求工具axios的二次封裝詳解的詳細(xì)內(nèi)容,更多關(guān)于vue axios封裝的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue3的ref,computed,reactive和toRefs你都了解嗎
這篇文章主要為大家詳細(xì)介紹了vue3的ref,computed,reactive和toRefs,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-03-03
Vue3中進(jìn)行二維碼的生成與解碼實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了Vue3中進(jìn)行二維碼的生成與解碼實(shí)現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03
vue 導(dǎo)航菜單刷新狀態(tài)不消失,顯示對應(yīng)的路由界面操作
這篇文章主要介紹了vue 導(dǎo)航菜單刷新狀態(tài)不消失,顯示對應(yīng)的路由界面操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue3中關(guān)于getCurrentInstance的大坑及解決
這篇文章主要介紹了Vue3中關(guān)于getCurrentInstance的大坑及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04
vue中v-model如何綁定多循環(huán)表達(dá)式實(shí)戰(zhàn)案例
v-model綁定的變量無論是對象還是數(shù)組都是綁定的value值,下面這篇文章主要給大家介紹了關(guān)于vue中v-model如何綁定多循環(huán)表達(dá)式的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
Antd-vue Table組件添加Click事件,實(shí)現(xiàn)點(diǎn)擊某行數(shù)據(jù)教程
這篇文章主要介紹了Antd-vue Table組件添加Click事件,實(shí)現(xiàn)點(diǎn)擊某行數(shù)據(jù)教程,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue?實(shí)現(xiàn)左滑圖片驗(yàn)證功能
網(wǎng)頁中滑動圖片驗(yàn)證一直是各大網(wǎng)站、移動端的主流校驗(yàn)方式,其主要作用是為了區(qū)分人和機(jī)器以及為了防止機(jī)器人程序暴力登錄或攻擊從而設(shè)置的一種安全保護(hù)方式,這篇文章主要介紹了vue?實(shí)現(xiàn)左滑圖片驗(yàn)證,需要的朋友可以參考下2023-04-04
Vue.js通用應(yīng)用框架-Nuxt.js的上手教程
本篇文章主要介紹了Vue.js通用應(yīng)用框架-Nuxt.js的上手教程,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-12-12

