Vue3 axios无法读取未定义的属性（读取'config'）答案

【问题标题】：Vue3 axios Cannot read properties of undefined (reading 'config')Vue3 axios无法读取未定义的属性（读取'config'）
【发布时间】：2021-11-14 03:33:43
【问题描述】：

我一直在按照 this 指南制作全局加载器组件，但在使用配置设置拦截器时存在问题。

错误：TypeError: Cannot read properties of undefined (reading 'config')

我正在使用 vue 3.2.2、vuex 4.0.2、axios 0.21 和 Laravel 8

加载器组件不工作，我怀疑这可能是由于配置错误。

app.js

<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,
    }
})

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

App.vue

<script>
import Sidebar from "../components/Sidebar";
import {mapState} from "vuex/dist/vuex.mjs";
import Loader from "./Loader";
import axios from "axios";
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 => {
                let response = error.response;

                if (response.config.showLoader) {
                    store.dispatch('loader/done');
                }

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

【问题讨论】：

您能否发布您收到的错误消息
@Jacob 问题中说明了错误。这是我在控制台中看到的单个错误，除了所有 axios 调用停止工作之外，页面没有显示任何错误。
错误可以追踪到特定的行，但问题不包含它。有几个失败点。通常 error.response 不保证存在，因此访问 response.config 是错误的。

标签： vue.js axios vuex

【解决方案1】：

您的拦截器箭头函数与 config 参数有问题

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) => {
  let response = error.response;

  if (response.config.showLoader) {
    store.dispatch('loader/done');
  }
  return Promise.reject(error);
})

【讨论】：

答案并没有准确解释什么问题。