相信很多大哥大姐,在actions中写请求的时候,可能会用到捕获错误 try catch
当然也有一些大哥可能会说到,我从来都没用过这个玩意,说实话一个真正考虑比较全面的项目,应该考虑出错后的问题处理,而不是一味相信程序一定会走正确的“线路”
最近在用pinia作为状态管理器,但是请求方法中 每次写一个actions 都要 一遍又一遍的写 try catch 真的的烦人,能不能搞个一劳永逸的 方式进行处理呢。
这就是需求 有个思考就需要找个方法处理了。
需要我们去写一个统一中间处理的逻辑方法,其实这个方法就是一个插件,本质也就是一个“函数”
有些初学者可能比较恐惧插件,或者希望自己啥时候能写一个插件,其实这玩意搞明白没啥子,首先不要怕,看着那些大佬一个一个插件写的那个牛掰,自己好的插件写不出来,写个简单差的也行,最主要的是中间自己收获了什么!!!!!
这个插件很简单的 这个错误处理的插件。 但是你要搞明白为什么要这么做,这个才是最主要的了!!
pinia-error-plugin.js
export default ({ options, store }) => {
if (options.errorHandle) {
// 用新的action覆盖旧的action
return Object.keys(options.errorHandle).reduce((actions, action) => {
actions[action] = (function (fn) {
return function (...arg) {
try {
fn.apply(null, arg);
} catch (error) {
console.log(error, "error");
// 这里根据项目你可以自定义处理些事情
}
};
})(store[action]);
return actions;
}, {});
}
};
使用
main.js
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import { createPinia } from "pinia";
const pinia = createPinia();
import piniaErrorPlugin from "pinia-error-plugin"
// 使用插件
pinia.use(piniaErrorPlugin);
createApp(App).use(pinia).use(router).mount("#app");
store.js
import { defineStore } from "pinia";
const test = function () {
return new Promise((resolve) => {
resolve(new Error("hello world")) // 抛出错误
// resolve("hello world")
});
};
export const useStore = defineStore(
"counter",
{
state: () => ({ count: 0 }),
getters: {
double: (state) => state.count * 2,
},
actions: {
async print(params) {
console.log('参数:', params)
const res = await test();
console.log(res, '==')
},
},
errorHandle: {
print: true,
}
},
);
觉得有用的话 就给博主点个小心心 谢谢哈
git地址 : https://github.com/zhaoyunchong/pinia-error-plugin
npm地址: https://www.npmjs.com/package/pinia-error-plugin
pinia插件介绍文档: https://pinia.web3doc.top/core-concepts/plugins.html
其实前端最主要的就是基础吧 其他的就交给时间!!!(取自意味前端大佬的话语,这个是真大佬,是谁就不说了)
关注我持续更新前端知识