响应拦截器中request.js:20 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '$message')

### 响应拦截器中出现的 TypeError 错误解决方案 在响应拦截器中出现 `TypeError: Cannot read properties of undefined (reading '$message')` 的问题，通常是由于 `$message` 属性未正确定义或未正确注入到当前上下文中。以下是可能的原因及解决方案： #### 1. 确保 `$message` 已正确注册 如果 `$message` 是一个全局方法（例如来自 Element Plus 或其他 UI 框架），需要确保它已被正确安装并挂载到 Vue 实例上[^2]。 ```javascript import { createApp } from 'vue'; import App from './App.vue'; import ElementPlus from 'element-plus'; import 'element-plus/dist/index.css'; const app = createApp(App); app.use(ElementPlus); app.config.globalProperties.$message = function (msg) { console.log(msg); // 示例：可以替换为实际的消息提示逻辑 }; app.mount('#app'); ``` #### 2. 在非组件环境中使用 `$message` 如果响应拦截器位于非组件文件中（如 `request.js`），直接访问 `this.$message` 将不起作用，因为 `this` 不指向 Vue 实例。可以通过以下方式解决： - **全局导入**：将 `$message` 方法导出并在拦截器中直接调用。 ```javascript // utils/message.js import { ElMessage } from 'element-plus'; export const showMessage = (msg, type = 'error') => { ElMessage({ message: msg, type: type, }); }; ``` ```javascript // request.js import axios from 'axios'; import { showMessage } from './utils/message'; const instance = axios.create({ baseURL: 'https://example.com/api', timeout: 5000, }); instance.interceptors.response.use( (response) => { return response.data; }, (error) => { if (error.response) { const errorMessage = error.response.data.message || 'An unknown error occurred'; showMessage(errorMessage, 'error'); } return Promise.reject(error); } ); export default instance; ``` #### 3. 使用 Vuex 或 Pinia 全局状态管理 如果 `$message` 是通过 Vuex 或 Pinia 注册的全局方法，可以在拦截器中通过引入 Store 来调用[^1]。 ```javascript // store/index.js import { defineStore } from 'pinia'; export const useMessageStore = defineStore('message', { actions: { showGlobalMessage(msg, type = 'error') { this.$message({ message: msg, type }); }, }, }); ``` ```javascript // request.js import { useMessageStore } from '@/store/index'; const messageStore = useMessageStore(); instance.interceptors.response.use( (response) => { return response.data; }, (error) => { if (error.response) { const errorMessage = error.response.data.message || 'An unknown error occurred'; messageStore.showGlobalMessage(errorMessage, 'error'); } return Promise.reject(error); } ); ``` #### 4. 检查依赖版本兼容性 某些情况下，错误可能是由于框架或插件版本不兼容导致的。确保使用的 Vue、Axios 和相关 UI 框架版本匹配，并参考官方文档进行配置[^1]。 --- ### 示例代码 以下是一个完整的响应拦截器实现示例： ```javascript // request.js import axios from 'axios'; import { ElMessage } from 'element-plus'; const instance = axios.create({ baseURL: 'https://example.com/api', timeout: 5000, }); instance.interceptors.response.use( (response) => { return response.data; }, (error) => { if (error.response) { const errorMessage = error.response.data.message || 'An unknown error occurred'; ElMessage({ message: errorMessage, type: 'error', }); } return Promise.reject(error); } ); export default instance; ``` ---