axios请求封装和异常统一处理

当先后端分离时，权限问题的处理也和咱们传统的处理方式有一点差别。笔者前几天恰好在负责一个项目的权限管理模块，如今权限管理模块已经作完了，我想经过5-6篇文章，来介绍一下项目中遇到的问题以及个人解决方案，但愿这个系列可以给小伙伴一些帮助。本系列文章并非手把手的教程，主要介绍了核心思路并讲解了核心代码，完整的代码小伙伴们能够在GitHub上star并clone下来研究。另外，本来计划把项目跑起来放到网上供小伙伴们查看，可是以前买服务器为了省钱，内存只有512M，两个应用跑不起来(已经有一个V部落开源项目在运行)，所以小伙伴们只能将就看一下下面的截图了，GitHub上有部署教程，部署到本地也能够查看完整效果。

---

项目地址：https://github.com/lenve/vhr

前面几篇文章，咱们已经基本解决了服务端的问题，本文咱们主要来聊聊前端网络请求的封装。

本文是本系列的第四篇，建议先阅读前面的文章有助于更好的理解本文：

1.SpringBoot+Vue先后端分离，使用SpringSecurity完美处理权限问题(一)
2.SpringBoot+Vue先后端分离，使用SpringSecurity完美处理权限问题(二)
3.SpringSecurity中密码加盐与SpringBoot中异常统一处理

前端网络请求封装

前端采用了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里边了，所以就没在请求失败时关闭进度条了，解决这个问题，有两种方案：

1.直接在request的拦截器中开启一个fullscreen的loading，而后在response的拦截器中将其关闭，即我将进度条也封装到工具js中了，可是很是不推荐这种方式，由于这种方式的用户体验很是之差，有兴趣的小伙伴能够本身试一下就知道了。

2.第二种解决方案就是你们看到的，我返回一个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});
        }
    })
    }
});

添加Vue插件

因为我对axios进行了封装，所以在每个须要使用axios的地方，都须要导入相应的请求，略显麻烦，参考https://cn.vuejs.org/v2/guide/plugins.html，我将请求方法挂到Vue上，具体操做以下：

1.在main.js中导入全部的请求方法，以下：

import {getRequest} from './utils/api'
import {postRequest} from './utils/api'
import {deleteRequest} from './utils/api'
import {putRequest} from './utils/api'

2.把它们添加到 Vue.prototype 上，以下：

Vue.prototype.getRequest = getRequest;
Vue.prototype.postRequest = postRequest;
Vue.prototype.deleteRequest = deleteRequest;
Vue.prototype.putRequest = putRequest;

如此以后，之后再须要发送网络请求，就不须要导入api了，直接经过下面这种方式便可：

this.postRequest('/login', {
    username: this.loginForm.username,
    password: this.loginForm.password
}).then(resp=> {
    ...
    }
});

OK，如此以后，网络请求处理就so easy了。