vue日常開(kāi)發(fā)基礎(chǔ)Axios網(wǎng)絡(luò)庫(kù)封裝
引言
首先Axios,一個(gè)基于 promise 的 HTTP 庫(kù),可以用在瀏覽器和 node.js 中。
網(wǎng)絡(luò)請(qǐng)求庫(kù)無(wú)疑是項(xiàng)目開(kāi)發(fā)中最基礎(chǔ)的建設(shè)了,在這個(gè)前后端分離的時(shí)代,市面上有不少優(yōu)秀的請(qǐng)求庫(kù),其中Axios就是優(yōu)秀代表之一。
- 攔截請(qǐng)求和響應(yīng)
- 轉(zhuǎn)換請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)
- 自動(dòng)轉(zhuǎn)換 JSON 數(shù)據(jù)
- 客戶(hù)端支持防御 XSRF
- 支持 PromiseAPI
以上是axios的優(yōu)秀點(diǎn)
axios使用
本文是基于Vue項(xiàng)目去使用Axios:
第一步安裝 npm install axios 已經(jīng)邁出了一步,打開(kāi)我們的package.json文件發(fā)現(xiàn)已經(jīng)安裝成功,
接下來(lái)我們?nèi)ゾ唧w實(shí)現(xiàn)功能:
1.配置請(qǐng)求基本信息
2.設(shè)置請(qǐng)求攔截器
3.設(shè)置請(qǐng)求響應(yīng)器
實(shí)現(xiàn)以上三個(gè)方法
配置請(qǐng)求基本信息
//request.js
import axios from 'axios'
// 創(chuàng)建axios實(shí)例
const service = axios.create({
// axios中請(qǐng)求配置有baseURL選項(xiàng),表示請(qǐng)求URL公共部分
baseURL: process.env.VUE_APP_BASE_API,
// 超時(shí)
timeout: 20000
})
設(shè)置請(qǐng)求攔截器
在發(fā)送請(qǐng)求之前我們總得做一些事情:
- 是否需要token(如需要的話(huà)將每個(gè)請(qǐng)求攜帶token)
- 如果是get需要傳遞參數(shù)的話(huà)需要將特殊字符過(guò)濾掉
// request攔截器
service.interceptors.request.use(
config => {
// 是否需要設(shè)置 token
const isToken = (config.headers || {}).isToken === false
if (getToken() && !isToken) {
config.headers['Authorization'] = 'Bearer ' + getToken() // 讓每個(gè)請(qǐng)求攜帶自定義token 請(qǐng)根據(jù)實(shí)際情況自行修改
}
// get請(qǐng)求映射params參數(shù)
if (config.method === 'get' && config.params) {
let url = config.url + '?'
for (const propName of Object.keys(config.params)) {
const value = config.params[propName]
var part = encodeURIComponent(propName) + '='
if (value !== null && typeof value !== 'undefined' && value !== '') {
if (typeof value === 'object') {
for (const key of Object.keys(value)) {
let params = propName
// let params = propName + '[' + key + ']'
var subPart = encodeURIComponent(params) + '='
url += subPart + encodeURIComponent(value[key]) + '&'
}
} else {
url += part + encodeURIComponent(value) + '&'
}
}
}
url = url.slice(0, -1)
config.params = {}
config.url = url
}
return config
},
error => {
console.log(error)
Promise.reject(error)
}
)
補(bǔ)充:
encodeURIComponent方法是js提供的一個(gè)方法,把字符串作為 URI 組件進(jìn)行編碼,該方法不會(huì)對(duì) ASCII 字母和數(shù)字進(jìn)行編碼,主要作用是過(guò)濾掉特殊字符
設(shè)置請(qǐng)求響應(yīng)器
當(dāng)數(shù)據(jù)回來(lái)的時(shí)候,我們也得干一點(diǎn)事情:
- 判斷登錄狀態(tài)
- 錯(cuò)誤處理
import { Message, MessageBox, Notification } from 'element-ui'
import errorCode from '@/utils/errorCode'
// 響應(yīng)攔截器
service.interceptors.response.use(
res => {
// 未設(shè)置狀態(tài)碼則默認(rèn)成功狀態(tài)
const code = Number(res.data.code) || 200
// 獲取錯(cuò)誤信息
const msg = errorCode[code] || res.data.msg || errorCode['default']
if (code === 401) {
MessageBox.confirm(
'登錄狀態(tài)已過(guò)期,您可以繼續(xù)留在該頁(yè)面,或者重新登錄',
'系統(tǒng)提示',
{
confirmButtonText: '重新登錄',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
store.dispatch('LogOut').then(() => {
location.href = '/index'
})
})
} else if (code === 500) {
Message({
message: msg,
type: 'error'
})
return Promise.reject(new Error(msg))
} else if (code !== 200) {
Notification.error({
title: msg
})
return Promise.reject(msg)
} else {
return res.data
}
},
error => {
console.log('err' + error)
let { message } = error
if (message == 'Network Error') {
message = '后端接口連接異常'
} else if (message.includes('timeout')) {
message = '系統(tǒng)接口請(qǐng)求超時(shí)'
} else if (message.includes('Request failed with status code')) {
message = '系統(tǒng)接口' + message.substr(message.length - 3) + '異常'
}
Message({
message: message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default {
'401': '認(rèn)證失敗,無(wú)法訪問(wèn)系統(tǒng)資源',
'403': '當(dāng)前操作沒(méi)有權(quán)限',
'404': '訪問(wèn)資源不存在',
'default': '系統(tǒng)未知錯(cuò)誤,請(qǐng)反饋給管理員'
}
項(xiàng)目中使用
import request from '@/utils/request'
// 登錄方法
export function login(username, password, code, uuid) {
return request({
url: '/auth/admin/login',
method: 'post',
data: { username, password, code, uuid }
})
}
結(jié)尾
此時(shí)我們的網(wǎng)絡(luò)庫(kù)的基礎(chǔ)版已經(jīng)實(shí)現(xiàn),把service進(jìn)行一個(gè)導(dǎo)出,就可以在項(xiàng)目中使用了,這個(gè)版本基本可以滿(mǎn)足日常項(xiàng)目的開(kāi)發(fā),如果需要其他設(shè)置可以另行添加。 擴(kuò)展:
- axios取消重復(fù)請(qǐng)求
- axios無(wú)感token刷新
以上也是比較常見(jiàn)的場(chǎng)景,在本文注重實(shí)現(xiàn)基礎(chǔ)版網(wǎng)絡(luò)庫(kù),日后需要對(duì)以上的場(chǎng)景進(jìn)行探索。完結(jié)撒花~??
export default service
以上就是vue日常開(kāi)發(fā)基礎(chǔ)Axios網(wǎng)絡(luò)庫(kù)封裝的詳細(xì)內(nèi)容,更多關(guān)于vue開(kāi)發(fā)Axios網(wǎng)絡(luò)庫(kù)封裝的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue基于Element按鈕權(quán)限實(shí)現(xiàn)方案
這篇文章主要介紹了vue基于Element按鈕權(quán)限實(shí)現(xiàn)方案,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
vue頁(yè)面離開(kāi)后執(zhí)行函數(shù)的實(shí)例
下面小編就為大家分享一篇vue頁(yè)面離開(kāi)后執(zhí)行函數(shù)的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue前端img訪問(wèn)鑒權(quán)后端進(jìn)行攔截的代碼示例
路由攔截是一種在用戶(hù)訪問(wèn)特定頁(yè)面之前對(duì)其進(jìn)行攔截和處理的機(jī)制,下面這篇文章主要給大家介紹了關(guān)于vue前端img訪問(wèn)鑒權(quán)后端進(jìn)行攔截的相關(guān)資料,需要的朋友可以參考下2024-03-03
vue 跳轉(zhuǎn)到其他頁(yè)面并關(guān)閉當(dāng)前頁(yè)面的實(shí)現(xiàn)代碼
我在做一個(gè)調(diào)用虛擬機(jī)錄屏的一個(gè)操作,需要在瀏覽器頁(yè)面上,點(diǎn)擊按鈕后,關(guān)閉當(dāng)前頁(yè)面里的某一個(gè)頁(yè)面,并且打開(kāi)瀏覽器新頁(yè)面是虛擬機(jī)的頁(yè)面,本文給大家介紹vue 跳轉(zhuǎn)到其他頁(yè)面并關(guān)閉當(dāng)前頁(yè)面的實(shí)現(xiàn)代碼,感興趣的朋友一起看看吧2023-09-09
Vue+Element UI+Lumen實(shí)現(xiàn)通用表格分頁(yè)功能
這篇文章主要介紹了Vue+Element UI+Lumen實(shí)現(xiàn)通用表格分頁(yè)功能,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
element?ui富文本編輯器的使用效果與步驟(quill-editor)
富文本編輯器在任何項(xiàng)目中都會(huì)用到,在Element中我們推薦vue-quill-editor組件,下面這篇文章主要給大家介紹了關(guān)于element?ui富文本編輯器的使用效果與步驟(quill-editor)的相關(guān)資料,需要的朋友可以參考下2022-10-10
Vue數(shù)據(jù)監(jiān)聽(tīng)器watch和watchEffect的使用
今天我們來(lái)學(xué)習(xí)一下watch監(jiān)聽(tīng)器和它的好兄弟watchEffect監(jiān)聽(tīng)器。這個(gè)相對(duì)來(lái)說(shuō)比較簡(jiǎn)單,用的不是很多,當(dāng)然了,根據(jù)自己的項(xiàng)目情況自行決定使用,希望對(duì)大家有所幫助2023-02-02
Vue3使用defineAsyncComponent實(shí)現(xiàn)異步組件加載的代碼示例
在 Vue 3 中,異步組件加載是一種優(yōu)化應(yīng)用性能的重要手段,通過(guò)異步加載組件,可以減少初始加載時(shí)的資源體積,從而提升應(yīng)用的加載速度和用戶(hù)體驗(yàn),本文將詳細(xì)介紹如何使用 defineAsyncComponent 實(shí)現(xiàn)異步組件加載,并提供相關(guān)的代碼示例,需要的朋友可以參考下2025-03-03

