在Vue中是如何封裝axios
更新時(shí)間：2021年10月09日 09:51:59 作者：青蓮使者
這篇文章主要介紹在Vue中是如何封裝axios的相關(guān)資料，axios的封裝主要是幫助我們簡(jiǎn)化代碼和利于后期的更新維護(hù)，感興趣的小伙伴可以和小編一起來(lái)閱讀下面文章的具體內(nèi)容
1、安裝
npm install axios; // 安裝axios
1、引入
import axios from 'axios'
3、接口根地址
const baseUrl = API_BASE_URL // 由webpack的插件DefinePlugin注入
webpackConfig
.plugin('define')
.use(require('webpack/lib/DefinePlugin'), [{
// NODE_ENV 環(huán)境變量，開(kāi)發(fā)環(huán)境為: 'development', 為了保證測(cè)試環(huán)境打的包與生產(chǎn)環(huán)境一致，測(cè)試環(huán)境和生產(chǎn)環(huán)境都為'production'
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
// 當(dāng)前應(yīng)用的環(huán)境（開(kāi)發(fā)環(huán)境為: 'dev'，測(cè)試環(huán)境為: 'test', 生產(chǎn)環(huán)境為: 'prod'）
'process.env.APP_ENV': JSON.stringify(process.env.APP_ENV),
// 后臺(tái)接口請(qǐng)求地址
'API_BASE_URL': JSON.stringify(config.meshProp('apiBaseUrl')),
// 首頁(yè)路徑
'APP_INDEX_PATH': JSON.stringify(indexPath),
// 路由模式
'APP_ROUTER_MODE': JSON.stringify(config.meshProp('routerMode')),
// 是否使用Element組件庫(kù)
'APP_USE_ELEMENT': JSON.stringify(config.meshProp('useElement')),
}])
config.js：配置一些系統(tǒng)名稱，api根路徑等
const path = require('path')
const os = require('os')
const packageName = 'focm' // 項(xiàng)目包名稱
const localIP = getLocalIP() // 本地IP地址
module.exports = {
// 默認(rèn)配置
default: {
// 系統(tǒng)名稱，用于設(shè)置頁(yè)面 head 中 title
appName: 'xxxxx',
// 是否為多頁(yè)應(yīng)用
isMulti: false,
// 是否支持移動(dòng)端
isMobile: false,
// 是否使用Element組件庫(kù)（https://element.eleme.cn/#/zh-CN/）
useElement: true,
// 路由模式（值為hash 或 history, 參考：https://router.vuejs.org/）
routerMode: 'hash',
// 接口請(qǐng)求根路徑
apiBaseUrl: '',
....
},
// 開(kāi)發(fā)環(huán)境的配置
dev: {
apiBaseUrl: '/api',
host: localIP,
port: 8080,
autoOpenBrowser: true, // 是否自動(dòng)打開(kāi)瀏覽器
writeToDisk: false, // 是否將生成的文件寫(xiě)入磁盤(pán)
proxyTable: {
'/api': {
target: 'http://focm-web.focms.paas.test',
changeOrigin: true
}
}
},
// 測(cè)試環(huán)境的配置
test: {
// 接口請(qǐng)求根路徑
apiBaseUrl: '/focm',
outputRoot: path.resolve(__dirname, 'dist/test'),
publish: {
remoteHost: 'x.x.x.x',
remotePort: '22',
remoteUsername: 'qinglianshizhe',
remotePassword: 'xxxxxx',
remoteAppRoot: `/xxx/xxx/${packageName}`,
webUrl: 'http://xxxxx.com/'
}
},
// 生產(chǎn)環(huán)境的配置
prod: {
...
}
}
// 獲取本地IP
function getLocalIP () {
let interfaces = os.networkInterfaces()
for(let devName in interfaces){
let iface = interfaces[devName]
for(let i=0;i<iface.length;i++){
let alias = iface[i];
if(alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal){
return alias.address;
}
}
}
return 'localhost'
}
我們繼續(xù)來(lái)封裝axios
/**
* 業(yè)務(wù)異常類(lèi)
*/
class BusinessError extends Error {
constructor (code, message, data) {
super(message)
this.code = code
this.name = 'BusinessError'
this.data = data
}
}
/**
* 系統(tǒng)異常類(lèi)
*/
class SystemError extends Error {
constructor (code, message, data) {
super(message)
this.code = code
this.name = 'SystemError'
this.data = data
}
}
// axios 配置
axios.defaults.timeout = 10000
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'
// 執(zhí)行 POST 請(qǐng)求
function post (option, vm) {
option.method = 'POST'
return http(option, vm)
}
// 執(zhí)行 GET 請(qǐng)求
function get (option, vm) {
option.method = 'GET'
return http(option, vm)
}
// 下載請(qǐng)求
function download (option, vm) {
option.method = option.method || 'GET'
option.isDownload = true
option.responseType = 'blob'
return http(option, vm)
}
/**
* 請(qǐng)求后臺(tái)接口
* @param option 參數(shù)
* url: 請(qǐng)求路徑（會(huì)拼接到baseUrl后面，“/” 開(kāi)頭）
* data: 請(qǐng)求參數(shù)對(duì)象
* timeout: 請(qǐng)求超時(shí)時(shí)間（默認(rèn)為：10000，即10秒）
* toastError: 自動(dòng)提示業(yè)務(wù)異常信息，默認(rèn)為true，為false時(shí)不自動(dòng)提示
* @param vm Vue對(duì)象（用于異常時(shí)自動(dòng)toast提示異常信息）
* @return {Promise} Promise對(duì)象
*/
function http (option, vm) {
return new Promise((resolve, reject) => {
let method = option.method || 'POST'
let url = baseUrl + option.url
let timeout = option.timeout || 10000
let headers = option.headers || {}
let responseType = option.responseType
let data = {} // 可以在此設(shè)置默認(rèn)值
if (option.data) {
if (option.data instanceof FormData) {
headers['Content-Type'] = 'multipart/form-data'
let formData = option.data
Object.keys(data).forEach((key) => {
formData.append(key, data[key])
})
data = formData
} else {
data = { ...data, ...option.data }
}
}
let requestOptions = { method, url, headers, timeout, responseType }
if (method.toUpperCase() === 'GET') {
requestOptions.params = data
} else {
requestOptions.data = data
}
axios(requestOptions).then( (res) => {
const contentDisposition = res.headers['content-disposition']
// 文件下載
if (contentDisposition &&
(/filename\*=UTF-8''(.*)/.test(contentDisposition) || /filename="(.*)"/.test(contentDisposition))) { // 如果是文件下載
const utf8Match = contentDisposition.match(/filename\*=UTF-8''(.*)/) // 匹配UTF-8的文件名
const normalMatch = contentDisposition.match(/filename="(.*)"/) // 匹配普通英文文件名
const filename = utf8Match ? decodeURIComponent(utf8Match[1]) : normalMatch[1]
const blob = new Blob([res.data])
const downloadElement = document.createElement('a')
const href = window.URL.createObjectURL(blob)
downloadElement.href = href
downloadElement.download = filename
document.body.appendChild(downloadElement)
downloadElement.click()
document.body.removeChild(downloadElement)
window.URL.revokeObjectURL(href)
resolve(res)
} else { // JSON信息
getResponseInfo(res).then((resInfo) => {
responseInfoHandle(resInfo, resolve, reject, option, vm, requestOptions)
})
}
}, err => {
errorhandle(err, reject, option, vm)
}).catch(function (err) {
errorhandle(err, reject, option, vm)
})
})
}
// 處理響應(yīng)信息
function responseInfoHandle (resInfo, resolve, reject, option, vm) {
// 請(qǐng)求是否成功
let isSuccess = resInfo.retCode === '200'
// 狀態(tài)碼
let code = resInfo.retCode
// 描述信息
let message = resInfo.retMsg || '請(qǐng)求失??！'
// 數(shù)據(jù)
let resData = resInfo.data || {}
if (isSuccess) { // 請(qǐng)求成功
console.log(`[${option.method || 'POST'}]${option.url} 請(qǐng)求成功！\n請(qǐng)求參數(shù):`, option.data, '\n響應(yīng)結(jié)果:', resInfo)
resolve(resData)
} else { // 業(yè)務(wù)異常
console.error(`[${option.method} || 'POST']${option.url} 請(qǐng)求失??！\n請(qǐng)求參數(shù):`, option.data, '\n響應(yīng)結(jié)果:', resInfo)
let err = new BusinessError(code, message, resData)
errorhandle(err, reject, option, vm)
}
}
// 獲取響應(yīng)信息json對(duì)象
function getResponseInfo (res) {
return new Promise((resolve, reject) => {
// 返回的信息
let resInfo = res.data
if (resInfo instanceof Blob) {
const reader = new FileReader()
reader.readAsText(resInfo, 'utf-8')
reader.onload = () => {
resInfo = JSON.parse(reader.result)
resolve(resInfo)
}
} else {
resolve(resInfo)
}
})
}
/* 異常處理 */
function errorhandle (err, reject, option, vm) {
let error = null
if (err.name === 'BusinessError') {
error = err
} else {
console.error(option.url, '請(qǐng)求失敗！', err.code, err)
error = new SystemError(500, '非常抱歉，系統(tǒng)出現(xiàn)錯(cuò)誤，請(qǐng)稍后重試！')
}
console.log('error = ', error)
if (vm) {
if (error.name === 'BusinessError') { // 業(yè)務(wù)異常
// 沒(méi)有權(quán)限
if (error.code === 'xxx') {
error.ignore = true
if (!isShowUnauthorized) {
vm.$popupAlert({
title: '提示',
message: '未登錄或者會(huì)話已過(guò)期，請(qǐng)重新登錄！',
width: 330,
height: 180,
btnText: '重新登錄',
onOK: () => {
isShowUnauthorized = false // 是否顯示重新登錄彈框設(shè)為true
// 跳轉(zhuǎn)到登錄頁(yè)面，登錄成功后還跳轉(zhuǎn)到原路徑
vm.$router.push({ name: 'login', params: { fromPath: vm.$route.fullPath } })
vm.$eventBus.$emit('NO_AUTH_EVENT')
}
})
isShowUnauthorized = true // 是否顯示重新登錄彈框設(shè)為true
}
error.ignore = true
} else if (option.toastError !== false) {
vm.$toast({ type: 'error', message: error.message })
}
} else { // 系統(tǒng)異常
vm.$toast('網(wǎng)絡(luò)異常！')
}
}
reject(error)
}
export default {
baseUrl,
http,
post,
get,
download
}
apiPlugin.js，封裝成plugin插件
import Vue from 'vue'
import api from '@/assets/js/api.js'
export default {
install () {
Vue.prototype.$api = api
}
}
main.js，注入插件
import ApiPlugin from './plugins/apiPlugin.js' // 后臺(tái)接口插件 Vue.use(ApiPlugin)
4、使用事例
4.1下載
this.$api.download({
url: '/xxx/xxx/xxx',
data: params
}, this)
4.2get
this.$api.get({
url: `/xxx/xxx/xx`,
data: params
}, this).then((res) => {
console.log(res)
})
4.3post
this.$api.post({
url: '/api/basicList/query',
data: params
}, this).then(res => {
})
到這里axios的封裝基本就完成了
到此這篇關(guān)于在Vue中是如何封裝axios的文章就介紹到這了,更多相關(guān)在Vue中封裝axios內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要介紹了vue實(shí)現(xiàn)登陸登出的實(shí)現(xiàn)示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2021-09-09
這篇文章主要介紹了封裝一個(gè)Vue文件上傳組件案例詳情，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08
vue使用keep-alive無(wú)效以及include和exclude用法解讀
這篇文章主要介紹了vue使用keep-alive無(wú)效以及include和exclude用法解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue引用vee-validate插件表單驗(yàn)證問(wèn)題(cdn方式引用)
這篇文章主要介紹了Vue引用vee-validate插件表單驗(yàn)證問(wèn)題(cdn方式引用)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了Vue字符串中如何添加多個(gè)空格問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
vue如何集成raphael.js中國(guó)地圖的方法示例
最近的數(shù)據(jù)統(tǒng)計(jì)項(xiàng)目中要用到中國(guó)地圖，也就是在地圖上動(dòng)態(tài)的顯示某個(gè)時(shí)間段某個(gè)省份地區(qū)的統(tǒng)計(jì)數(shù)據(jù)，我們不需要flash，僅僅依靠raphael.js以及SVG圖像就可以完成地圖的交互操作。本文就給大家介紹了關(guān)于利用vue集成raphael.js中國(guó)地圖的相關(guān)資料，需要的朋友可以參考下。2017-08-08
vue自定義指令(2.x丨3.x)可以幫助我們實(shí)現(xiàn)需要操作，比如防抖、節(jié)流、懶加載、輸入框自動(dòng)聚焦等等，使用起來(lái)非常方便，比如vue自帶的v-text、v-html、v-show、v-if等等,這篇文章主要介紹了vue2.x與vue3.x中自定義指令詳解,需要的朋友可以參考下2022-12-12
uniApp前端實(shí)現(xiàn)文字識(shí)別并提取詳細(xì)分析
這篇文章主要介紹了如何實(shí)現(xiàn)文字圖片分析的功能,包括頁(yè)面結(jié)構(gòu)、樣式和腳本邏輯,主要步驟包括獲取access_token、將圖片轉(zhuǎn)換為Base64格式、上傳至百度文字識(shí)別接口并處理返回結(jié)果,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-02-02
記一次vue-webpack項(xiàng)目?jī)?yōu)化實(shí)踐詳解
這篇文章主要介紹了記一次vue-webpack項(xiàng)目?jī)?yōu)化實(shí)踐，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
Vue中實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)效果示例代碼
這篇文章主要介紹了Vue中實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)效果示例代碼,Vue中為我們提供一些內(nèi)置組件和對(duì)應(yīng)的API來(lái)完成動(dòng)畫(huà)，利用它們我們可以方便的實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)效果，需要的朋友可以參考下2022-08-08