vue axios 封装请求拦截多次弹窗的问题及解决

目录

• 问题
• 解决方案
• 实现方法
• 总结

const myAxios = {
    install(Vue) {
        let http = axios.create({
            // baseURL: 'http://localhost:8088/hklms/app',
            // baseURL: process.env.BASE_API,
            timeout:1000,
            // transformRequest: [
            //     function (data){
            //         return qs.stringify(data, {
            //             indices: false
            //         })
            //     }
            // ]
            
        })
        http.interceptors.request.use(
            config => {
                config.cancelToken = new axios.CancelToken((cancel) => {
                    //使用vuex 定义pushCancel，请求进来存入
                    store.dispatch('user/pushCancel', {cancelToken:cancel})
                  });
                if (store.state.user.token) {
                    config.headers['token'] = store.state.user.token
                }
                return config
            },
            error => {
                console.log(error)
            }
        )
        http.interceptors.response.use(
            response => {
                const res = response.data;
                if(res.code && res.code === 401){
                    store.dispatch('user/clearCancel');
                    sessionStorage.clear()
                    Message.error(res.msg)
                    router.push("/login")
                    return Promise.reject(error);
                }else {
                    return response
                }
                
            },
            error => {
                return Promise.reject(error);
            }
            
        )

state: {
axiosCancelArr:[],
}
mutations:{
    CLOSE_SIDEBAR: (state) => {
            state.opened = !state.opened
            if(state.opened){
                sessionStorage.setItem('sidebarStatus',1)
            }else {
                sessionStorage.setItem('sidebarStatus',0)
            }
            
        },
        PUSH_CANCEL(state, cancel){
            state.axiosCancelArr.push(cancel.cancelToken);
          },
      
          CLEAR_CANCEL(state){
            state.axiosCancelArr.forEach(e=>{
              e && e()
            });
            state.axiosCancelArr = []
        }
},
actions: {
    pushCancel({commit}, cancel){
            commit('PUSH_CANCEL', cancel)
     },
    clearCancel({commit}){
            commit('CLEAR_CANCEL');
    }
}