axios的全局异常拦截

拦截器介绍

在使用axios时，会用到拦截器的功能，一般分为两种：请求拦截器、响应拦截器。

请求拦截器:
在请求发送前进行必要操作处理，例如添加统一token、设置请求头、参数加密等，相当于是对每个接口里相同操作的一个封装；
响应拦截器:
响应拦截器也是如此功能，只是在请求得到响应之后，对响应体的一些处理，通常是数据统一处理等，也常来判断登录失效等。

http.js

添加一个axios的拦截器

import router from '@/config/routes'
import axios from 'axios'
import Vue from 'vue'
import {
  Message
} from 'element-ui'

axios.get('/VueApp_config.json').then(res => {
  axios.defaults.baseURL = res.data.REMOTE_ADDR
})

//response拦截器
axios.interceptors.response.use(
  function (response) {
    if (response.data.code === 0) {
      return response
    }
    if (response.data.code === -1) {
      router.replace({
        name: 'login'
      });
    }
    // 错误信息的提示框
    Message({
      type: 'error',
      message: response.data.message,
      showClose: true,
    })

    // 将未处理的异常往外抛
    // 注：如果没有return Promise.reject(response)，或者是直接return; 的话，当前请求的响应仍然会进行then中，只是它的response是undefined的。
    // 所以直接返回Promise.reject，在catch方法哪里就直接吃掉。
    return Promise.reject(response)
  },
  function (error) {
    // todo: 做一些其他日志记录处理
    Message({
      type: 'error',
      message: '服务器错误，' + error,
      showClose: true,
    })
  }
)
// request拦截器  可对请求进行相应的处理
axios.interceptors.request.use(
  function (config) {
    config.withCredentials = true
    // 默认永不超时 0为永不超时
    config.timeout = 0
    //  设置请求的token
    let val = window.sessionStorage.getItem('tokenValue')
    let key = window.sessionStorage.getItem('tokenName')
    let token = {}
    Vue.set(token, key, val)
    if (token) {
      config.headers = token
    }
    return config
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

export default {
  get: function (url, params) {
    return new Promise((resolve, reject) => {
      axios.get(url, {
          params: params,
        })
        .then((response) => {
          resolve(response);
        })
        .catch((err) => {
          // 接受响应拦截器中Promise.reject(response)，如果不需要对错误信息进行操作可以不用返回 reject(err)
          // reject(err);
        });
    });

  },
  post: function (url, data) {
    return new Promise((resolve, reject) => {
      axios.post(url, data, {
          headers: {
            "Content-Type": "application/json",
          },
        })
        .then(
          (response) => {
            resolve(response);
          },
          (err) => {
            // reject(err);
          }
        );
    });
  },
  delete: function (url, data, ) {
    return new Promise((resolve, reject) => {
      axios.delete(url + '' + data)
        .then(
          (response) => {
            resolve(response);
          },
          (err) => {
            // reject(err);
          }
        );
    });
  },
  put: function (url, data) {
    return new Promise((resolve, reject) => {
      axios.put(url, data)
        .then(
          (response) => {
            resolve(response);
          },
          (err) => {
            // reject(err);
          }
        );
    });
  },

}

绑定在全局环境中

main.js

# 引入http文件
import http from './utils/http.js'
# 绑定到Vue实例上
Vue.prototype.$http = http

使用

在使用的时候就不用在进行catch，进行错误信息的提示了

this.$http
    .delete('/api/user/', id)
    .then((res) => {
        Message({
          type: 'success',
          message: '删除成功!',
        })
        this.getTable()
    })