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

前端网络请求封装
前端采用了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了。

巴特西

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

最新文章

热门文章