Vue+ELement-ui关于axios拦截器的优化

之前的文章写过vue里面封装axiso拦截器,但其实那个axios拦截器是比较粗糙的,仅仅只是实现了拦截而已,需要优化一下限制条件,不能每次请求任何页面,无论失败还是成功都给与拦截提示,这个对用户体验而言其实并不友好,之前的开发需求中就要求做一定的优化,今天就将优化的代码总结出来

import axios from 'axios';
import router from '@/router/routers';   
import { Notification, MessageBox } from 'element-ui';//ele的提示框
import store from '../store';
import { getToken } from '@/utils/auth';  //这个是封装的自定义token方式
import Config from '@/config';//项目全局配置环境

// 1.创建axios实例
const service = axios.create( {
    baseURL: process.env.VUE_APP_BASE_API, // 项目接口的请求基路径
    timeout: Config.timeout // 请求超时
} );

//2.request拦截器
service.interceptors.request.use(
    config => {
        //限制条件1 login接口不传token
        if ( getToken() && config.url != 'auth/login' ) {
            config.headers[ 'Authorization' ] = 'Bearer ' + getToken(); // 每个post请求携带自定义token 请根据实际情况自行修改,Bearer可以看看'https://www.jianshu.com/p/8f7009456abc'
        }
        config.headers[ 'Content-Type' ] = 'application/json';
        return config;
    },
    error => {
        //`处理请求错误`
        console.log( error ); // 打印 debug
        Promise.reject( error );
    }
);

//3.response 拦截器
service.interceptors.response.use(
    response => {
        const code = response.status;
        //这个就是我要讲的限制条件2  根据状态码弹出提示
        if ( code < 200 || code > 300 ) {
            Notification.error( {
                title: response.message
            } );
            return Promise.reject( 'error' );
        } else {
            return response.data;
        }
    },
    //限制条件3  对状态码做细致提示,超时,网络,过期
    error => {
        let code = 0;
        try {
            code = error.response.data.status;
        } catch ( e ) {
            if ( error.toString().indexOf( 'Error: timeout' ) !== -1 ) {
                Notification.error( {
                    title: '网络请求超时',
                    duration: 2500
                } );
                return Promise.reject( error );
            }
            if ( error.toString().indexOf( 'Error: Network Error' ) !== -1 ) {
                Notification.error( {
                    title: '网络请求错误',
                    duration: 2500
                } );
                return Promise.reject( error );
            }
        }
        if ( code === 401 ) {
            MessageBox.confirm( '登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
                confirmButtonText: '重新登录',
                cancelButtonText: '取消',
                type: 'warning'
            } ).then( () => {
                store.dispatch( 'LogOut' ).then( () => {
                    location.reload(); // 为了重新实例化vue-router对象 避免bug
                } );
            } );
        } else if ( code === 403 ) {
            router.push( { path: '/401' } );  //让其跳到401
        } else {
            const errorMsg = error.response.data.message;
            if ( errorMsg !== undefined ) {
                Notification.error( {
                    title: errorMsg,
                    duration: 2500
                } );
            }
        }
        return Promise.reject( error );
    }
);
export default service;