Vue axios interceptor 实现

使用 VueAxios 及其 interceptor 的实现

在 Vue 项目中使用 axios

首先，使用 npm 安装依赖：

npm install --save axios vue-axios

在项目文件中使用：

/**
 @file: vue-axios.js
*/
import axios from 'axios';
import VueAxios from 'vue-axios';

import Vue from 'vue';
 
Vue.use(VueAxios, axios);

export default Vue.axios;

之后，你就可以通过

import axios from '../common/vue/vue-axios';

axios.get(api).then((response) => {
    console.log(response.data);
});

这样的方式来与后端进行数据的交互啦～

interceptor 的实现

/**
  @file: app.vue
*/
// ...
mounted() {
    const vm = this;

    vm.initHttpInterceptor();
// ....
},

methods: {
// ...
    initHttpInterceptor() {
        const vm = this;
        const {$toast} = vm;

        // http request 拦截器
        axios.interceptors.request.use(
            req => {
                Object.assign(req.headers.common, {
                    // ...
                });
                return req;
            },
            err => Promise.reject(err)
        );

        // http response 拦截器
        axios.interceptors.response.use(
            res => {
                const {status = {}} = res.data;
                const {code, detail = '未知错误'} = status;

                if (code === SUCCESS_CODE) { // api 正常返回
                    return res;
                } else {
                    $toast.error(detail);
                    return Promise.reject(res);
                }
            },
            error => Promise.reject(error.response.data)
        );
    },
}