Vue3配置axios拦截器实现全局Loader时报config未定义错误如何解决？

错误原因 #

• 未在App.vue中引入app.js中定义的Vuex store实例，直接调用store.dispatch会触发未定义报错
• 响应错误拦截器中未判断error.response是否存在：当请求未完成网络请求（如断网、跨域拦截、请求超时无响应）时，error.response为undefined，直接访问response.config会触发你遇到的属性读取错误
• 请求错误拦截器中未对error.config做可选判断，极端场景下也可能触发同类错误

修复步骤 #

1. 调整app.js导出store #

在app.js的store定义完成后新增导出语句，方便其他文件引用，完整代码如下：

<script>
import { createApp } from 'vue'
import { createStore  } from 'vuex'
import router from './router';
import App from './components/App';
import { loader } from "./loader";

const store = createStore({
    state() {
    },
    modules: {
        loader,
    }
})
// 新增导出语句
export default store

const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')
</script>

2. 修复App.vue的导入和拦截器逻辑 #

• 导入store实例
• 替换vuex的导入路径为官方标准写法
• 所有访问config的位置增加可选链判空，修改后的完整代码如下：

<script>
import Sidebar from "../components/Sidebar";
// 替换为标准vuex导入
import {mapState} from "vuex";
import Loader from "./Loader";
import axios from "axios";
// 导入app.js导出的store，可根据你的实际文件路径调整
import store from "./app";
axios.defaults.showLoader = true;

export default {
    components: {
        Sidebar,
        Loader
    },
    computed: {
        ...mapState('loader', ['loading'])
    },
    created() {
        axios.interceptors.request.use(
            config => {
                if (config.showLoader) {
                    store.dispatch('loader/pending');
                }
                return config;
            },
            error => {
                // 增加可选链判空
                if (error?.config?.showLoader) {
                    store.dispatch('loader/done');
                }
                return Promise.reject(error);
            }
        );
        axios.interceptors.response.use(
            response => {
                if (response.config.showLoader) {
                    store.dispatch('loader/done');
                }

                return response;
            },
            error => {
                // 先判断response是否存在再访问config
                if (error.response?.config?.showLoader) {
                    store.dispatch('loader/done');
                }

                return Promise.reject(error);
            }
        )
    }
}
</script>

内容的提问来源于stack exchange，提问作者Ricardo