脚本宝典收集整理的这篇文章主要介绍了在Vue中是如何封装axios，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
npm install axios; // 安装axios
import axios From 'axios'
const baseUrl = API_BASE_URL // 由webpack的插件definePlugin注入 webpackconfig .plugin('define') .use(require('webpack/lib/DefinePlugin'), [{ // NODE_env 环境变量，开发环境为: 'development', 为了保证测试环境打的包与生产环境一致，测试环境和生产环境都为'PRoduction' 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV), // 当前应用的环境（开发环境为: 'dev'，测试环境为: 'test', 生产环境为: 'prod'） 'process.env.APP_ENV': JSON.stringify(process.env.APP_ENV), // 后台接口请求地址 'API_BASE_URL': JSON.stringify(config.meshProp('apiBaseUrl')), // 首页路径 'APP_INDEX_PATH': JSON.stringify(indexpath), // 路由模式 'APP_ROUTER_MODE': JSON.stringify(config.meshProp('routerMode')), // 是否使用Element组件库 'APP_USE_ELEMENT': JSON.stringify(config.meshProp('useElement')), }])
config.js：配置一些系统名称，api根路径等
const path = require('path')
const os = require('os')
const packageName = 'focm' // 项目包名称
const localIP = getLocalIP() // 本地IP地址
module.exports = {
// 默认配置
default: {
// 系统名称，用于设置页面 head 中 tITle
appName: 'xxxxx',
// 是否为多页应用
isMulti: false,
// 是否支持移动端
ismobile: false,
// 是否使用Element组件库（https://element.eleme.cn/#/zh-CN/）
useElement: true,
// 路由模式（值为hash 或 history, 参考：https://router.vuejs.org/）
routerMode: 'hash',
// 接口请求根路径
apiBaseUrl: '',
....
},
// 开发环境的配置
dev: {
apiBaseUrl: '/api',
host: localIP,
port: 8080,
autoOPEnbrowser: true, // 是否自动打开浏览器
writeTodisk: false, // 是否将生成的文件写入磁盘
ProxyTable: {
'/api': {
target: 'http://focm-web.foCMS.paas.test',
changeOrigin: true
}
}
},
// 测试环境的配置
test: {
// 接口请求根路径
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/'
}
},
// 生产环境的配置
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.f@R_512_2578@ly === 'ipv4' && alias.address !== '127.0.0.1' && !alias.internal){
return alias.address;
}
}
}
return 'localhost'
}
我们继续来封装axios
/**
* 业务异常类
*/
class BusinessError extends Error {
constructor (code, message, data) {
super(message)
this.code = code
this.name = 'BusinessError'
this.data = data
}
}
/**
* 系统异常类
*/
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'
// 执行 POST 请求
function post (option, vm) {
option.method = 'POST'
return http(option, vm)
}
// 执行 GET 请求
function get (option, vm) {
option.method = 'GET'
return http(option, vm)
}
// 下载请求
function download (option, vm) {
option.method = option.method || 'GET'
option.isDownload = true
option.responseType = 'blob'
return http(option, vm)
}
/**
* 请求后台接口
* @param option 参数
* url: 请求路径（会拼接到baseUrl后面，“/” 开头）
* data: 请求参数对象
* timeout: 请求超时时间（默认为：10000，即10秒）
* toastError: 自动提示业务异常信息，默认为true，为false时不自动提示
* @param vm Vue对象（用于异常时自动toast提示异常信息）
* @return {Promise} Promise对象
*/
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 = {} // 可以在此设置默认值
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)
})
})
}
// 处理响应信息
function responseInfoHandle (resInfo, resolve, reject, option, vm) {
// 请求是否成功
let isSuccess = resInfo.retCode === '200'
// 状态码
let code = resInfo.retCode
// 描述信息
let message = resInfo.retMsg || '请求失败！'
// 数据
let resData = resInfo.data || {}
if (isSuccess) { // 请求成功
console.LOG(`[${option.method || 'POST'}]${option.url} 请求成功！\n请求参数:`, option.data, '\n响应结果:', resInfo)
resolve(resData)
} else { // 业务异常
console.error(`[${option.method} || 'POST']${option.url} 请求失败！\n请求参数:`, option.data, '\n响应结果:', resInfo)
let err = new BusinessError(code, message, resData)
errorhandle(err, reject, option, vm)
}
}
// 获取响应信息json对象
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, '请求失败！', err.code, err)
error = new SystemError(500, '非常抱歉，系统出现错误，请稍后重试！')
}
console.log('error = ', error)
if (vm) {
if (error.name === 'BusinessError') { // 业务异常
// 没有权限
if (error.code === 'xxx') {
error.ignore = true
if (!isShowUnauthorized) {
vm.$popupAlert({
title: '提示',
message: '未登录或者会话已过期，请重新登录！',
width: 330,
height: 180,
BTnText: '重新登录',
onOK: () => {
isShowUnauthorized = false // 是否显示重新登录弹框设为true
// 跳转到登录页面，登录成功后还跳转到原路径
vm.$router.push({ name: 'login', params: { fromPath: vm.$route.fullPath } })
vm.$eventBus.$emit('NO_AUTH_EVENT')
}
})
isShowUnauthorized = true // 是否显示重新登录弹框设为true
}
error.ignore = true
} else if (option.toastError !== false) {
vm.$toast({ type: 'error', message: error.message })
}
} else { // 系统异常
vm.$toast('网络异常！')
}
}
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' // 后台接口插件 Vue.use(ApiPlugin)
this.$api.download({
url: '/xxx/xxx/xxx',
data: params
}, this)
this.$api.get({
url: `/xxx/xxx/xx`,
data: params
}, this).then((res) => {
console.log(res)
})
this.$api.post({
url: '/api/basicList/query',
data: params
}, this).then(res => {
})
到这里axios的封装基本就完成了
到此这篇关于在Vue中是如何封装axios的文章就介绍到这了,更多相关在Vue中封装axios内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！
以上是脚本宝典为你收集整理的在Vue中是如何封装axios全部内容，希望文章能够帮你解决在Vue中是如何封装axios所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。