为什么 Vue 的 errorHandler 捕捉不到 axios 的错误？

Question

我在Vue3的main.js中设置了一个全局errorHandler:

app.config.errorHandler = error => {
    console.log("catch error")
}

在一般方法中，效果很好。例如：

methods: {
  showMessage() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        reject("async error!")
      }, 500)
    })
  }
}

它在控制台打印catch error，但是当我使用axios发出请求时，它无法捕获axios的Uncaught (in promise) Error。如：

methods: {
  showMessage() {
    this.$axios.get('/wrong-url/').then(response => {
      console.log('wrong url')
    })
  }
}

此时全局errorHandler 无法捕获错误。控制台显示错误：

Uncaught (in promise) Error: Request failed with status code 404

我用谷歌搜索过，但找不到原因。

Answer 1

Promise 未在方法中 return 编辑和隔离，这是一个错误。除了少数例外，应始终保留承诺链，这允许处理错误：

  showMessage() {
    return this.$axios.get('/wrong-url/').then(response => {
    ...

一个万无一失的方法是使用 async..await 因为它强制一个函数 return 一个承诺：

  async showMessage() {
    const response = await this.$axios.get('/wrong-url/');
    ...

可以组合使用 linter rule 以避免 promise 链错误。

Answer 2

config.errorHandler 用于处理前端错误。创建应用程序时，您仍然需要创建一个 interceptor：

...
created() {
    axios.interceptors.response.use((response) => {
        return response;
    }, function(error) {
        // Do something ...

        return Promise.reject(error);
    });
}
...

app.config.errorHandler = (err, instance, info) => {
    // Do something ...
};

为什么 Vue 的 errorHandler 捕捉不到 axios 的错误？

Why does Vue's errorHandler fail to catch axios's error?

javascript

promise

uncaught-exception

vue.js