import axios from 'axios'
import { Loading, MessageBox } from 'element-ui'
import { baseURL } from '@/config/rootPath' // 请求根路径
export default class Request{
constructor () {
this.interceptorsRequest()
this.interceptorsResponse()
}
/**
* 请求拦截器
* */
interceptorsRequest () {
axios.interceptors.request.use(config => {
if (config.showLoading && !this.loading) {
this.loading = Loading.service({
text: '正在加载中...',
spinner: 'el-icon-loading'
})
}
return config
}, (error) => {
return Promise.reject(error)
})
}
/**
* 响应拦截器
* */
interceptorsResponse () {
axios.interceptors.response.use(response => {
const { data } = response
return data
}, (error) => {
return Promise.reject(error)
})
}
/**
* 公共网络请求
* @param {string} url 请求头路径
* @param {string} method 请求类型、默认post
* @param {object} header 请求头、默认{}
* @param {object} data 请求参数、默认{}
* @param {number} timeout 请求超时时间、默认10000ms
* @param {boolean} showLoading 是否显示加载动画、默认true
* */
ajax ({
url,
method = 'post',
header = {},
data = {},
timeout = 10000,
showLoading = true
}) {
return new Promise((resolve, reject) => {
axios({
header: this.getHeader(header),
baseURL,
url,
method,
data,
timeout,
showLoading
}).then(result => {
this.dealStatusCode({
result,
url,
resolve,
reject
})
}).catch(error => {
const { response = {} } = error
const { status } = response
this.dealError({
status,
url,
reject
})
}).finally(() => {
this.loading && this.loading.close()
})
})
}
/**
* 合并请求头
* @param {object} header //请求头
* */
getHeader (header) {
const defaultHeader = {}
header = header.constructor === Object ? header : {}
return Object.assign(defaultHeader, header)
}
/**
* 处理请求错误信息
* @param {string|number} status 错误信息
* @param {string} url 请求地址
* @param {function} reject 失败回掉函数
* @param {string} msg 错误信息
* */
dealError ({ status, url, reject, msg = '请求异常!' }) {
if (!this.messageBox) {
this.messageBox = MessageBox.alert(
`状态码:${status}<br/>
错误提示:${msg}<br/>
请求地址:${url}`,
'服务器异常',
{
dangerouslyUseHTMLString: true,
showClose: false,
confirmButtonText: '知道了',
type: 'error'
}).then(() => {
reject(status)
})
}
}
/**
* 处理后台服务器返回状态码(注:可以根据自己公司返回的状态码进行修改)
* @param {object} result 请求结果
* @param {string} url 请求地址
* @param {function} resolve 成功回掉函数
* @param {function} reject 失败回掉函数
* */
dealStatusCode ({ result, url, resolve, reject }) {
let { state, msg, data } = result
msg = msg || '后台未返回错误信息!'
switch (state) {
case 'SUCCESS':
resolve(data)
break
case 'ERROR':
this.dealError({
status: state,
url,
reject,
msg
})
break
case 'NOLOGIN':
location.href = '/login'
break
default: // do something
}
}
}
// 用法
const request = new Request()
request.ajax({
url: 'url'
}).then(data => {
console.log(data) // 请求结果
}).catch(status => {
console.log(status) // 错误状态码
})
基于axios和element-ui封装的请求
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...