axios.js 文件中,根据状态码判断是否离线,如何在js文件操作各个页面的组件的显示

那年
  • 89

1.axios.js 是个单独抽离出来的文件,里面都是通讯请求的,我使用了axios的请求拦截器,当status code 是504的时候,我就当做是断网处理

2.当断网了那么别的页面就会出现一个刷新的按钮,并且提示用户当前是离线的状态

问题:请问我要怎么在axios.js文件中中去触发各个页面展示的刷新按钮和弹框提醒呢

    error => {
        if (error.response) {
            switch (error.response.status) {
                case 401:
                    // 这里写清除token的代码
                    // localStorage.removeItem('token')
                    router.replace({
                        path: '/',
                        query: {
                            redirect: router.currentRoute.fullPath
                        } //登录成功后跳入浏览的当前页面
                    });
                case 504:
                    // this.$toast('未连接到网络,请检查网络设置哦!')
                    // 这里怎么操作让别的页面的刷新按钮出现????
            }
        }
        return Promise.reject(error)
    });

当断网的时候就出现这个属性按钮
image.png

回复
阅读 1.9k
4 个回答

如果你的应用里面已经有vuex
store的实例是可以在任何地方使用的

// store.js
const store = new Vuex.Store({});
exprot store

// axios 中
import store from './store的目录'
store.commit() 
store.dispath()

全局事件总线

这个断网状态应该是一个全局的状态,放在全局状态管理中会方便些,看你问题里面有 vue,可以把这个全局状态使用 vuex 管理。

监听 document.body 对象的 onlineoffline 事件,在回调函数里 commit

你知道吗?

宣传栏