在某些时候开发我错误输入新变量的名称 . 抛出异常,但如果在Vue操作中的Promise上下文中调用代码,则不会在控制台上记录此异常 .
假设一个Vue动作返回一个抛出异常的Promise:
export const debug = ({}) => {
return new Promise((resolve, reject) => {
throw 'MyError';
});
}
当 dispatch
调用该操作时,异常将被静音并且永远不会在控制台上记录 . 确保报告问题的最佳方法是什么?
一种显而易见的方法是为每个负责记录错误的 dispatch
(或每个动作)添加一个 catch
:
// Each action
export const debug = ({}) => {
return new Promise((resolve, reject) => {
throw 'MyError';
})
.catch(err => {
console.error(err);
});
}
// Each dispatch
this.$store.dispatch('debug')
.catch(err => {
console.error(err);
});
该解决方案看起来很重,只是记录错误 . 毕竟,这里的要点不是优雅地从错误中恢复,而是记录在Vuex操作上下文之外调用时将报告的内容 .
Vuex使用发出 vuex:error
消息的 catch
包装动作promises(请参阅vuex store.js
):
function registerAction (store, type, handler, local) {
const entry = store._actions[type] || (store._actions[type] = [])
entry.push(function wrappedActionHandler (payload, cb) {
let res = handler({
dispatch: local.dispatch,
commit: local.commit,
getters: local.getters,
state: local.state,
rootGetters: store.getters,
rootState: store.state
}, payload, cb)
if (!isPromise(res)) {
res = Promise.resolve(res)
}
if (store._devtoolHook) {
return res.catch(err => {
store._devtoolHook.emit('vuex:error', err)
throw err
})
} else {
return res
}
})
}
通用处理程序可以对 vuex:error
作出反应,但由于 store._devtoolHook
似乎也没有 .
处理在Vuex操作的上下文中抛出异常的Promise的最佳方法是什么?