Vuex/Pinia 异步操作错误处理：拦截！全局捕获！一个都不能少！
各位观众，各位朋友，大家好！我是你们的老朋友，一个在代码海洋里摸爬滚打多年的老水手。今天呢，咱们不开车，咱们来聊聊 Vuex 和 Pinia 里那些让人头疼的异步操作错误。
都说“常在河边走，哪能不湿鞋”，写代码也是一样，异步操作越多，出错的概率就越高。 错误处理不好，轻则用户体验稀烂，重则程序崩溃，数据丢失，那可真是欲哭无泪啊！
所以，今天我将以一个“老船长”的身份，带领大家一起学习如何为 Vuex 和 Pinia 中的异步操作设计一套“拦截+全局捕获”的双保险错误处理机制，保证咱们的“代码之船”在复杂的异步环境中也能稳稳当当，一路向前！
第一章：为什么我们需要一个统一的错误处理机制？
首先，我们要明白一个道理：代码的世界里，没有“万无一失”。异步操作更是如此，网络请求失败、服务器宕机、数据格式错误等等，各种意外情况随时可能发生。
如果没有一个统一的错误处理机制，你可能会遇到以下问题：
- 代码冗余： 每个异步操作都要写一遍
try...catch或者.catch()，代码重复不说，还容易漏掉。 - 错误信息不统一： 不同的地方报出来的错误信息五花八门，排查问题时一脸懵逼。
- 用户体验差： 错误发生时，页面直接崩溃或者出现各种莫名其妙的提示，用户一脸懵逼。
- 难以维护： 代码散落在各个地方，修改起来非常麻烦，维护成本高。
所以，我们需要一个统一的错误处理机制，就像给我们的“代码之船”装上雷达和声呐，及时发现并处理潜在的风险，保证航行安全。
第二章：拦截器：在错误发生之前扼杀它！
拦截器就像是安检人员，在请求发出之前或者响应返回之后进行检查，发现问题就及时拦截，避免错误进一步蔓延。
2.1 Vuex 中的拦截器：插件的妙用
Vuex 本身没有直接提供拦截器的概念，但我们可以利用插件来实现类似的功能。
核心思想：
- 定义一个插件，在插件中拦截所有的 mutation 和 action。
- 对于异步 action，在 dispatch 之前和之后进行处理。
- 在处理过程中，如果发生错误，就统一进行处理。
代码示例：
// error-handler-plugin.js
const errorHandlerPlugin = (store) => {
store.subscribeAction({
before: (action, state) => {
// 可在此处进行一些准备工作，例如显示加载动画
console.log(`[ACTION BEFORE]: ${action.type}`);
},
after: (action, state) => {
console.log(`[ACTION AFTER]: ${action.type}`);
},
error: (action, state, error) => {
console.error(`[ACTION ERROR]: ${action.type}`, error);
// 统一错误处理
handleError(error, action);
}
});
};
function handleError(error, action) {
// 在这里处理错误，例如：
// 1. 显示错误提示
alert(`Error in ${action.type}: ${error.message}`);
// 2. 记录日志
console.error("Error caught in plugin:", error);
// 3. 可以根据错误类型进行不同的处理
if (error.message.includes("Network Error")) {
// 处理网络错误
alert("网络好像不太好哦，请稍后再试！");
} else if (error.message.includes("404")) {
// 处理 404 错误
alert("请求的资源不见了！");
}
}
export default errorHandlerPlugin;
// 在 main.js 中使用
import Vue from 'vue'
import Vuex from 'vuex'
import store from './store'
import errorHandlerPlugin from './error-handler-plugin'
Vue.use(Vuex)
const vuexStore = new Vuex.Store({
// ...你的 store 配置
plugins: [errorHandlerPlugin]
})
export default vuexStore;
// 在 store 的 actions 中
const actions = {
async fetchData({ commit }, payload) {
try {
const response = await fetch('/api/data'); // 假设这是一个异步请求
const data = await response.json();
commit('setData', data);
} catch (error) {
// 注意：这里可以不处理错误，交给插件处理
// 或者只做一些特定的处理，例如清理状态
console.log("Action caught error, but plugin will handle it:", error);
throw error; // 必须抛出错误，才能被插件捕获
}
}
};
export default new Vuex.Store({
state: {},
mutations: {},
actions,
});代码解释：
errorHandlerPlugin是一个 Vuex 插件，它接收store作为参数。store.subscribeAction监听所有的 action，并提供before、after和error三个钩子函数。before钩子函数在 action dispatch 之前执行，可以用来做一些准备工作。after钩子函数在 action 完成之后执行，可以用来做一些清理工作。error钩子函数在 action 发生错误时执行，我们可以在这里进行统一的错误处理。handleError函数负责具体的错误处理逻辑，例如显示错误提示、记录日志等等。- 在
actions里的错误处理，我们捕获错误之后，需要重新抛出错误，才能被errorHandlerPlugin捕获。
优点：
- 统一处理所有 action 的错误，避免代码冗余。
- 可以根据 action 类型进行不同的错误处理。
- 可以方便地扩展错误处理逻辑。
缺点：
- 需要手动抛出异常，不能很好地处理那些没有
try...catch的代码。 - 对于 mutation 中的错误，处理起来比较麻烦。
2.2 Pinia 中的拦截器：$onAction 的威力
Pinia 提供了更加方便的 store.$onAction() 方法来实现拦截器功能。
核心思想：
- 使用
store.$onAction()监听所有的 action。 - 在 action 执行之前、之后和发生错误时，分别执行不同的回调函数。
- 在错误回调函数中，统一进行错误处理。
代码示例：
// pinia-error-handler.js
import { defineStore } from 'pinia'
export const useErrorHandlerStore = defineStore('errorHandler', () => {
const setupErrorHandler = (store) => {
store.$onAction(
({
name, // action 的名字
store, // store 实例，参考上面
args, // 传递给 action 的参数
onError, // 注册 action 抛出错误时的回调
after, // 注册 action 成功完成后的回调
}) => {
const startTime = Date.now()
console.log(`[ACTION START]: ${name} with args ${args}`)
onError((error) => {
console.error(`[ACTION ERROR]: ${name}`, error)
// 统一错误处理
handleError(error, name)
})
after((result) => {
console.log(`[ACTION END]: ${name} took ${Date.now() - startTime}ms`)
return result
})
}
)
}
function handleError(error, actionName) {
// 在这里处理错误，例如：
// 1. 显示错误提示
alert(`Error in ${actionName}: ${error.message}`);
// 2. 记录日志
console.error("Error caught in Pinia action:", error);
// 3. 可以根据错误类型进行不同的处理
if (error.message.includes("Network Error")) {
// 处理网络错误
alert("网络好像不太好哦，请稍后再试！");
} else if (error.message.includes("404")) {
// 处理 404 错误
alert("请求的资源不见了！");
}
}
return { setupErrorHandler }
})
// 在 main.js 中使用
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import { useErrorHandlerStore } from './pinia-error-handler'
const app = createApp(App)
const pinia = createPinia()
app.use(pinia)
const errorHandlerStore = useErrorHandlerStore(pinia)
errorHandlerStore.setupErrorHandler(pinia.state.value.yourStoreName) // "yourStoreName" 替换为你 store 的名字. 例如： 你定义的是 userStore, 那就是 pinia.state.value.user
app.mount('#app')
// 在 Pinia store 中
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
state: () => ({
name: '张三',
age: 18,
data: null
}),
actions: {
async fetchData() {
try {
const response = await fetch('/api/user'); // 假设这是一个异步请求
this.data = await response.json();
} catch (error) {
// 注意：这里可以不处理错误，交给拦截器处理
console.log("Action caught error, but the interceptor will handle it:", error);
throw error; // 必须抛出错误，才能被拦截器捕获
}
}
}
})代码解释：
useErrorHandlerStore是一个 Pinia store， 负责设置错误处理。setupErrorHandler函数接收 store 实例作为参数.store.$onAction监听所有的 action，并提供一个回调函数，该回调函数接收一个对象，包含 action 的名字、store 实例、参数、onError和after等属性。onError函数在 action 发生错误时执行，我们可以在这里进行统一的错误处理。after函数在 action 完成之后执行，可以用来做一些清理工作。handleError函数负责具体的错误处理逻辑，例如显示错误提示、记录日志等等。- 和 Vuex 一样， 在
actions里的错误处理，我们捕获错误之后，需要重新抛出错误，才能被errorHandler捕获。
优点：
- API 更加简洁，使用起来更加方便。
- 可以方便地获取 action 的名字和参数。
- 同样可以根据 action 类型进行不同的错误处理。
缺点：
- 同样需要手动抛出异常。
- 对于 state 的直接修改，无法进行拦截。
2.3 拦截器的局限性
虽然拦截器可以帮助我们处理大部分的异步操作错误，但它也有一些局限性：
- 无法处理未捕获的异常： 如果代码中没有
try...catch或者.catch()，拦截器就无法捕获到异常。 - 无法处理同步代码的错误： 拦截器只能拦截异步操作，对于同步代码的错误，无能为力。
因此，我们需要一个全局的错误捕获机制，来处理这些“漏网之鱼”。
第三章：全局捕获：最后的防线！
全局捕获就像是“代码之船”的救生艇，当船只遇到无法避免的灾难时，可以保证船员的安全。
3.1 Vue 中的全局错误处理
Vue 提供了 Vue.config.errorHandler 来进行全局的错误处理。
核心思想：
- 设置
Vue.config.errorHandler，指定一个错误处理函数。 - 当 Vue 应用中发生未捕获的错误时，该函数会被调用。
代码示例：
// main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.errorHandler = (err, vm, info) => {
// 处理错误，例如：
// 1. 显示错误提示
alert(`Global Error: ${err.message}`);
// 2. 记录日志
console.error("Global error caught:", err);
// 3. 可以将错误信息发送到服务器
// ...
};
new Vue({
render: h => h(App),
}).$mount('#app')代码解释：
Vue.config.errorHandler接收一个函数，该函数接收三个参数：err：错误对象。vm：发生错误的 Vue 实例。info：关于错误来源的信息，例如生命周期钩子、事件处理函数等等。
- 在错误处理函数中，我们可以进行各种错误处理操作，例如显示错误提示、记录日志等等。
优点：
- 可以捕获所有未捕获的错误，包括异步和同步的错误。
- 可以获取错误发生的 Vue 实例和来源信息，方便排查问题。
缺点：
- 无法区分错误类型，只能统一处理。
- 对于异步操作的错误，可能无法获取到完整的上下文信息。
3.2 Pinia 中的全局错误处理
Pinia 没有直接提供全局错误处理的 API，但我们可以结合 Vue 的全局错误处理来实现类似的功能。
核心思想：
- 在 Vue 的全局错误处理函数中，判断错误是否发生在 Pinia store 中。
- 如果是，则进行相应的处理。
代码示例：
// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
const app = createApp(App)
const pinia = createPinia()
app.use(pinia)
app.config.errorHandler = (err, vm, info) => {
console.error("Global error caught:", err);
// 判断错误是否发生在 Pinia store 中
if (vm && vm.$options && vm.$options.$pinia) {
// 在 Pinia store 中发生的错误
console.log("Error occurred in Pinia store:", err);
// 可以进行一些特定的处理
alert(`Pinia Error: ${err.message}`);
} else {
// 在其他地方发生的错误
alert(`Global Error: ${err.message}`);
}
};
app.mount('#app')代码解释：
- 在 Vue 的全局错误处理函数中，我们判断
vm是否存在，并且vm.$options.$pinia是否存在。 - 如果都存在，则说明错误发生在 Pinia store 中。
- 我们可以根据错误发生的地点进行不同的处理。
优点：
- 可以捕获所有未捕获的错误，包括异步和同步的错误。
- 可以区分错误是否发生在 Pinia store 中，方便进行针对性的处理。
缺点：
- 同样无法区分错误类型，只能统一处理。
- 对于异步操作的错误，可能无法获取到完整的上下文信息。
第四章：最佳实践：拦截+全局捕获，双保险！
说了这么多，我们来总结一下最佳实践：
- 使用拦截器处理大部分的异步操作错误。 无论是 Vuex 的插件还是 Pinia 的
$onAction，都可以帮助我们统一处理异步操作的错误，避免代码冗余。 - 使用全局错误处理捕获未捕获的异常。
Vue.config.errorHandler可以作为最后的防线，捕获所有未捕获的异常，保证程序的健壮性。 - 根据错误类型进行不同的处理。 在拦截器和全局错误处理函数中，我们可以根据错误类型进行不同的处理，例如网络错误、404 错误等等。
- 记录日志，方便排查问题。 无论是拦截器还是全局错误处理函数，都应该记录日志，方便我们排查问题。
- 显示友好的错误提示，提升用户体验。 当错误发生时，我们应该显示友好的错误提示，避免用户一脸懵逼。
用表格来总结一下：
| 机制 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| 拦截器 | 统一处理异步操作错误，避免代码冗余，可以根据 action 类型进行不同的处理，方便扩展错误处理逻辑。 | 需要手动抛出异常，不能很好地处理那些没有 try...catch 的代码，对于 mutation/state 的直接修改，处理起来比较麻烦。 |
处理大部分异步操作错误，例如网络请求失败、服务器宕机等等。 |
| 全局错误处理 | 可以捕获所有未捕获的错误，包括异步和同步的错误，可以获取错误发生的 Vue 实例和来源信息，方便排查问题。 | 无法区分错误类型，只能统一处理，对于异步操作的错误，可能无法获取到完整的上下文信息。 | 作为最后的防线，捕获那些没有被拦截器捕获的异常，例如同步代码的错误、未捕获的异步异常等等。 |
代码示例：
// 综合示例：Vue + Vuex + 拦截器 + 全局错误处理
// error-handler-plugin.js
const errorHandlerPlugin = (store) => {
store.subscribeAction({
error: (action, state, error) => {
console.error(`[ACTION ERROR]: ${action.type}`, error);
// 统一错误处理
handleError(error, action);
}
});
};
function handleError(error, action) {
// 在这里处理错误，例如：
// 1. 显示错误提示
alert(`Error in ${action.type}: ${error.message}`);
// 2. 记录日志
console.error("Error caught in plugin:", error);
// 3. 可以根据错误类型进行不同的处理
if (error.message.includes("Network Error")) {
// 处理网络错误
alert("网络好像不太好哦，请稍后再试！");
} else if (error.message.includes("404")) {
// 处理 404 错误
alert("请求的资源不见了！");
}
}
export default errorHandlerPlugin;
// main.js
import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'
import store from './store'
import errorHandlerPlugin from './error-handler-plugin'
Vue.use(Vuex)
Vue.config.errorHandler = (err, vm, info) => {
// 处理错误，例如：
// 1. 显示错误提示
alert(`Global Error: ${err.message}`);
// 2. 记录日志
console.error("Global error caught:", err);
// 3. 可以将错误信息发送到服务器
// ...
};
const vuexStore = new Vuex.Store({
// ...你的 store 配置
plugins: [errorHandlerPlugin]
})
new Vue({
store: vuexStore,
render: h => h(App),
}).$mount('#app')
// store.js
const actions = {
async fetchData({ commit }, payload) {
try {
const response = await fetch('/api/data'); // 假设这是一个异步请求
const data = await response.json();
commit('setData', data);
} catch (error) {
// 注意：这里可以不处理错误，交给插件处理
throw error; // 必须抛出错误，才能被插件捕获
}
},
// 模拟一个同步错误
syncError() {
throw new Error("This is a synchronous error!");
}
};
export default new Vuex.Store({
state: {},
mutations: {},
actions,
});这个例子展示了如何将拦截器和全局错误处理结合起来使用，为我们的 Vue 应用提供双重保障。
第五章：总结
各位观众，各位朋友，今天的“Vuex/Pinia 异步操作错误处理”讲座就到这里了。
希望通过今天的学习，大家能够掌握如何为 Vuex 和 Pinia 中的异步操作设计一套“拦截+全局捕获”的双保险错误处理机制，让我们的“代码之船”在复杂的异步环境中也能稳稳当当，一路向前！
记住，代码的世界里，没有“万无一失”，只有不断学习，不断进步，才能成为一名合格的“老船长”！
谢谢大家！下次再见！