由于Element的Loading是全局等待条,每次请求都需要显示,有时候不太方便。
下面做了一个处理,根据情况,在请求参数中添加showLoading=true,自行显示全局等待条。
import Axios from 'axios'
import qs from 'qs'
import { Message, Loading } from 'element-ui';
let loading; //定义loading变量
function startLoading() { //使用Element loading-start 方法
loading = Loading.service({
lock: true,
text: '加载数据中……',
background: 'rgba(0, 0, 0, 0.3)'
})
}
function endLoading() { //使用Element loading-close 方法
loading.close()
}
//那么 showFullScreenLoading() tryHideFullScreenLoading() 要干的事儿就是将同一时刻的请求合并。
//声明一个变量 needLoadingRequestCount,每次调用showFullScreenLoading方法 needLoadingRequestCount + 1。
//调用tryHideFullScreenLoading()方法,needLoadingRequestCount - 1。needLoadingRequestCount为 0 时,结束 loading。
let needLoadingRequestCount = 0
export function showFullScreenLoading() {
if (needLoadingRequestCount === 0) {
startLoading()
}
needLoadingRequestCount++
}
export function tryHideFullScreenLoading() {
if (needLoadingRequestCount <= 0) return
needLoadingRequestCount--
if (needLoadingRequestCount === 0) {
endLoading()
}
}
Axios.defaults.timeout = 60000
Axios.defaults.baseURL = ''
//http request 拦截器
Axios.interceptors.request.use(
config => {
if(config.method === 'post') { //支持2种方法,默认使用Form Data
if(config.data.useRequestBody) {
//参数需要带上useRequestBody
//如果useRequestBody=true, 支持Request Payload,
//SpringMVC Controller 中需要使用@RequestBody
delete config.data.useRequestBody;
config.headers = {
'Content-Type': 'application/json;charset=UTF-8'
}
} else {
//如果useRequestBody=false, 默认支持Form Data
//SpringMVC Controller 中不需要使用@RequestBody,默认使用@RequestParam
config.data = qs.stringify(config.data);
config.headers = {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
}
}
} else if(config.method === 'get') {
let newParams = {}
for(let key in config.params) {
newParams[key] = encodeURIComponent(config.params[key])
}
config.params = newParams
config.headers = {
'Content-Type': 'application/json;charset=UTF-8'
}
}
//显示等待框
showFullScreenLoading();
return config
},
error => {
return Promise.reject(error)
}
)
//http response 拦截器
Axios.interceptors.response.use(
response => {
let data = response.data
//隐藏等待框
//tryHideFullScreenLoading()
if(data.successFlag === 1) {
return Promise.resolve(data)
} else {
return Promise.reject(data)
}
},
error => {
return Promise.reject(error)
}
)
/**
* 封装get方法
* @param url
* @param data
* @returns {Promise}
*/
const get = function get(url, params = {}) {
return new Promise((resolve, reject) => {
params.showLoading && showFullScreenLoading() //显示等待框
Axios.get(url, {
params: params
})
.then(response => {
params.showLoading && tryHideFullScreenLoading() //隐藏等待框
resolve(response);
})
.catch(err => {
params.showLoading && tryHideFullScreenLoading() //隐藏等待框
reject(err)
})
})
}
/**
* 封装post请求
* @param url
* @param params
* @returns {Promise}
*/
const post = function post(url, params = {}) {
return new Promise((resolve, reject) => {
params.showLoading && showFullScreenLoading() //显示等待框
Axios.post(url, params)
.then(response => {
params.showLoading && tryHideFullScreenLoading() //隐藏等待框
resolve(response);
}, err => {
params.showLoading && tryHideFullScreenLoading() //隐藏等待框
reject(err)
})
})
}
/**
* 封装patch请求
* @param url
* @param data
* @returns {Promise}
*/
const patch = function patch(url, data = {}) {
return new Promise((resolve, reject) => {
Axios.patch(url, data)
.then(response => {
resolve(response);
}, err => {
reject(err)
})
})
}
/**
* 封装put请求
* @param url
* @param data
* @returns {Promise}
*/
const put = function put(url, data = {}) {
return new Promise((resolve, reject) => {
Axios.put(url, data)
.then(response => {
resolve(response);
}, err => {
reject(err)
})
})
}
export default {
post,
get,
patch,
put
}