vue学习日记：axios拦截器的配置

首先，在config文件夹下新建axios.js,并写入如下代码：

import axios from 'axios';
import iView from 'iview';

// 添加请求拦截器
axios.interceptors.request.use(function(config){
    // 一般在这里统一配置请求头什么的
    return config;
},function(error){
    // 我也不知道这里可以用来做什么
    return Promise.reject(error)
});
// 添加响应拦截器
axios.interceptors.response.use(function(response){
    // 这里指响应成功之后的处理，一般什么都不做
    return response;
},function(error){
    // 这里是对响应错误的处理，一般用来弹出toastr提示用户错误原因。
    console.log(error.response);
    iView.Notice.error({
        title: '状态:' + String(error.response.data.status || error.response.status) + "  " + String(error.response.data.message || error.response.data)
    });
    console.log(error.response.data.status || error.response.status,error.response.data.message || error.response.data);
    return Promise.reject(error.response);
});

然后在main.js中引入：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import App from './App';
import router from './router';

import '../config/axios';

import iView from 'iview';
import 'iview/dist/styles/iview.css';
Vue.use(iView);

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

这个拦截器的目的主要是在所有的请求中往header中注入信息，并且在服务器端响应错误的时候自动弹窗提示错误信息。

这里需要注意的有几个地方，由于这个地方不属于vue的conponent,所以要想使用iview组件中的Notice来提示错误信息，需要单独注入iview,并调用iview.Notice方法。

还有就是响应错误的处理，必须要用error.resoponse，如果试图console.log(error)或者Promise.reject(error)浏览器都会报错。更多相关的详细信息参见：

https://github.com/axios/axios/issues/960

另外，由于用了Promise.reject，所以我们的service中的请求后面必要加上catch，不然浏览器也会报错“Uncaught (in promise）”。

所以我们的service应该加上catch写成这样：

import axios from 'axios';

export default {
    // 登录
    login: (data) => axios({
        method: 'post',
        url: '/jwt/token',
        data: data
    }).then(res => {
        // 请求成功之后的回调在这里处理，失败之后的回调由拦截器统一处理
        console.log(res);
        if (res.status === 200) {
            return res.data;
        };
    }).catch(error => {
        console.warn(error);
    })
};

然后我们就可以发一个参数错误的请求来测试，看是否能正确的弹出提示框了。