前端采用了axios来处理网络请求，为了避免在每次请求时都去判断各种各样的网络情况，比如连接超时、服务器内部错误、权限不足等等不一而足，我对axios进行了简单的封装，这里主要使用了axios中的拦截器功能。

    封装后的网络请求工具js如下：

    1. import axios from 'axios'
    2. import {Message} from 'element-ui'
    4. axios.interceptors.request.use(config=> {
    5.   return config;
    6. }, err=> {
    7.   Message.error({message: '请求超时!'});
    8.   return Promise.resolve(err);
    9. })
    10. axios.interceptors.response.use(data=> {
    11.   if (data.status && data.status == 200 && data.data.status == 'error') {
    12.     Message.error({message: data.data.msg});
    13.     return;
    14.   }
    15.   return data;
    16. }, err=> {
    17.   if (err.response.status == 504||err.response.status == 404) {
    18.     Message.error({message: '服务器被吃了⊙﹏⊙∥'});
    19.   } else if (err.response.status == 403) {
    20.     Message.error({message: '权限不足,请联系管理员!'});
    21.   }else {
    22.     Message.error({message: '未知错误!'});
    23.   }
    24.   return Promise.resolve(err);
    25. })
    27. let base = '';
    29. export const postRequest = (url, params) => {
    30.   return axios({
    31.     method: 'post',
    32.     url: `${base}${url}`,
    33.     data: params,
    34.     transformRequest: [function (data) {
    35.       let ret = ''
    36.       for (let it in data) {
    37.         ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
    38.       }
    39.       return ret
    40.     }],
    41.     headers: {
    42.       'Content-Type': 'application/x-www-form-urlencoded'
    43.     }
    44.   });
    45. }
    46. export const uploadFileRequest = (url, params) => {
    47.   return axios({
    48.     method: 'post',
    49.     url: `${base}${url}`,
    50.     data: params,
    51.     headers: {
    52.       'Content-Type': 'multipart/form-data'
    53.     }
    54.   });
    55. }
    56. export const putRequest = (url, params) => {
    57.   return axios({
    58.     method: 'put',
    59.     url: `${base}${url}`,
    60.     data: params,
    61.     transformRequest: [function (data) {
    62.       let ret = ''
    63.       for (let it in data) {
    64.         ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
    65.       }
    66.       return ret
    67.     }],
    68.     headers: {
    69.       'Content-Type': 'application/x-www-form-urlencoded'
    70.     }
    71.   });
    72. }
    73. export const deleteRequest = (url) => {
    74.   return axios({
    75.     method: 'delete',
    76.     url: `${base}${url}`
    77.   });
    78. }
    79. export const getRequest = (url) => {
    80.   return axios({
    81.     method: 'get',
    82.     url: `${base}${url}`
    83.   });
    84. }

    封装之后的错误信息这个大家一目了然，没啥好说的，唯一要说的是当出错的时候我执行的是：Promise.resolve(err);，而不是Promise.reject(err);

    这是什么原因呢？因为封装axios一个重要的目的就是希望能够对错误进行统一处理，不用在每一次发起网络请求的时候都去处理各种异常情况，将所有的异常情况都在工具js中进行统一的处理。但是这种方式也带来一个问题，就是我在发起网络请求的时候，一般都会开启一个进度条，当网络请求结束时，不论请求成功还是失败，我都要将这个进度条关闭掉，而失败的处理我都统一写在工具js里边了，因此就没在请求失败时关闭进度条了，解决这个问题，有两种方案：

    1.直接在request的拦截器中开启一个fullscreen的loading，然后在response的拦截器中将其关闭，即我将进度条也封装到工具js中了，但是非常不推荐这种方式，因为这种方式的用户体验非常之差，有兴趣的小伙伴可以自己试一下就知道了。

    2.第二种解决方案就是大家看到的，我返回一个Promise.resolve(err)，则这个请求不会就此结束，错误的message我已经弹出来了，但是这条消息还是会继续传到then中，也就是说，无论请求成功还是失败，我在成功的回调中都能收到通知，这样我就可以将loading关闭了，比如下面这个登录请求：

    1. var _this = this;
    2. this.loading = true;
    3. this.postRequest('/login', {
    4.     username: this.loginForm.username,
    5.     password: this.loginForm.password
    6. }).then(resp=> {
    7.     _this.loading = false;
    8.     if (resp && resp.status == 200) {
    9.     _this.getRequest("/config/hr").then(resp=> {
    10.         if (resp && resp.status == 200) {
    11.         var data = resp.data;
    12.         _this.$store.commit('login', data);
    13.         var path = _this.$route.query.redirect;
    14.         _this.$router.replace({path: path == '/' || path == undefined ? '/home' : path});
    15.         }
    16.     })
    17.     }
    18. });