前端采用了 axios 来处理网络请求，为了避免在每次请求时都去判断各种各样的网络情况，比如连接超时、服务器内部错误、权限不足等等不一而足，我对 axios 进行了简单的封装，这里主要使用了 axios 中的拦截器功能。
封装后的网络请求工具 js 如下：
import axios from 'axios'
import {Message} from 'element-ui'
axios.interceptors.request.use(config=> {
return config;
}, err=> {
Message.error({message: '请求超时!'});
return Promise.resolve(err);
})
axios.interceptors.response.use(data=> {
if (data.status && data.status == 200 && data.data.status == 'error') {
Message.error({message: data.data.msg});
return;
}
return data;
}, err=> {
if (err.response.status == 504||err.response.status == 404) {
Message.error({message: '服务器被吃了⊙﹏⊙∥'});
} else if (err.response.status == 403) {
Message.error({message: '权限不足,请联系管理员!'});
}else {
Message.error({message: '未知错误!'});
}
return Promise.resolve(err);
})
let base = '';
export const postRequest = (url, params) => {
return axios({
method: 'post',
url: `${base}${url}`,
data: params,
transformRequest: [function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
});
}
export const uploadFileRequest = (url, params) => {
return axios({
method: 'post',
url: `${base}${url}`,
data: params,
headers: {
'Content-Type': 'multipart/form-data'
}
});
}
export const putRequest = (url, params) => {
return axios({
method: 'put',
url: `${base}${url}`,
data: params,
transformRequest: [function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
});
}
export const deleteRequest = (url) => {
return axios({
method: 'delete',
url: `${base}${url}`
});
}
export const getRequest = (url) => {
return axios({
method: 'get',
url: `${base}${url}`
});
}
封装之后的错误信息这个大家一目了然，没啥好说的，唯一要说的是当出错的时候我执行的是： Promise.resolve(err); ，而不是 Promise.reject(err);
这是什么原因呢？
因为封装 axios 一个重要的目的就是希望能够对错误进行统一处理，不用在每一次发起网络请求的时候都去处理各种异常情况，将所有的异常情况都在工具 js 中进行统一的处理。但是这种方式也带来一个问题，就是我在发起网络请求的时候，一般都会开启一个进度条，当网络请求结束时，不论请求成功还是失败，我都要将这个进度条关闭掉，而失败的处理我都统一写在工具 js 里边了，因此就没在请求失败时关闭进度条了，解决这个问题，有两种方案：
- 直接在 request 的拦截器中开启一个 fullscreen 的 loading，然后在 response 的拦截器中将其关闭，即我将进度条也封装到工具 js 中了，但是非常不推荐这种方式，因为这种方式的用户体验非常之差，有兴趣的小伙伴可以自己试一下就知道了。
- 第二种解决方案就是大家看到的，我返回一个
Promise.resolve(err)，则这个请求不会就此结束，错误的 message 我已经弹出来了，但是这条消息还是会继续传到 then 中，也就是说，无论请求成功还是失败，我在成功的回调中都能收到通知，这样我就可以将 loading 关闭了，比如下面这个登录请求：
var _this = this;
this.loading = true;
this.postRequest('/login', {
username: this.loginForm.username,
password: this.loginForm.password
}).then(resp=> {
_this.loading = false;
if (resp && resp.status == 200) {
_this.getRequest("/config/hr").then(resp=> {
if (resp && resp.status == 200) {
var data = resp.data;
_this.$store.commit('login', data);
var path = _this.$route.query.redirect;
_this.$router.replace({path: path == '/' || path == undefined ? '/home' : path});
}
})
}
});
扫码关注微信公众号 江南一点雨，回复 2TB，获取超 2TB Java 学习教程~