我有一个组件，我在catch中使用了很多带有then().catch()的axios，我总是抛出console.error()像：
axios.get(
//...
).then(
//...
).catch(
error => {
console.error(..)
}
)
还有其他几个地方我也会抛出错误。我在寻找是否有办法全局处理错误。我知道也许对于axios我可以使用拦截器，但vue组件已经离开以捕获错误，所以我可以将它们统一在一个函数中？
答案 0 :(得分：5)
Vue API提供the errorHandler，但它不会捕获方法中的错误（强调我的）：
在组件呈现功能和观察者期间为未捕获的错误分配处理程序。
以下示例。
Vue.config.errorHandler = function (err, vm, info) {
console.log('[Global Error Handler]: Error in ' + info + ': ' + err);
};
Vue.component('person', {template: '#person-template', props: ['person']});
new Vue({
el: '#app',
data: {
people: [
{name: 'Check the console', address: {zip: 4444}},
{name: 'No address', /* address: {zip: 5555} */}
]
}
})<script src="https://unpkg.com/vue@2.5.14/dist/vue.min.js"></script>
<template id="person-template">
<div>
Name: <b>{{ person.name }}</b> - Zip: {{ person.address.zip }}
</div>
</template>
<div id="app">
<div v-for="person in people">
<person :person="person"></person>
</div>
</div>
Vue.config.errorHandler = function (err, vm, info) {
console.log('[Global Error Handler]: Error in ' + info + ': ' + err);
};
Vue.component('person', {template: '#person-template', props: ['person']});
new Vue({
el: '#app',
data: {
message: "Some message"
},
watch: {
message() {
console.log(this.message.trim());
}
}
})<script src="https://unpkg.com/vue@2.5.14/dist/vue.min.js"></script>
<div id="app">
Message: {{ message }}
<br>
<button @click="message = null">click here to set message to null and provoke watcher error</button>
</div>
...遗憾的是，errorHandler 没有为方法工作：
Vue.config.errorHandler = function (err, vm, info) {
console.log('[Global Error Handler]: Error in ' + info + ': ' + err);
};
Vue.component('person', {template: '#person-template', props: ['person']});
new Vue({
el: '#app',
methods: {
goMethod() {
console.log(this.invalidProperty.trim());
}
}
})<script src="https://unpkg.com/vue@2.5.14/dist/vue.min.js"></script>
<div id="app">
<button @click="goMethod">click to execute goMethod() and provoke error that will NOT be handled by errorHandler</button>
</div>
最后：
我知道也许对于axios我可以使用拦截器，但是vue组件已经离开以捕获错误，所以我可以将它们统一在一个函数中吗？
目前还没有办法在Vue的一个功能中统一它们。
所以你的猜测是正确的，最好的办法是定义axios interceptors：
Axios拦截器
您可以在处理请求或响应之前拦截它们
then或catch。// Add a request interceptor axios.interceptors.request.use(function (config) { // Do something before request is sent return config; }, function (error) { // Do something with request error return Promise.reject(error); }); // Add a response interceptor axios.interceptors.response.use(function (response) { // Do something with response data return response; }, function (error) { // Do something with response error return Promise.reject(error); });