为什么Vue的errorHandler无法捕捉到axios的错误？答案

【问题标题】：Why does Vue's errorHandler fail to catch axios's error?为什么Vue的errorHandler无法捕捉到axios的错误？
【发布时间】：2021-08-19 15:14:34
【问题描述】：

我在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

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

【问题讨论】：

最好用try-catch！

标签： javascript vue.js promise uncaught-exception

【解决方案1】：

promise 没有在方法内部返回和隔离，这是一个错误。除了少数例外，应始终保留承诺链，这样可以处理错误：

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

一个万无一失的方法是使用async..await，因为它强制函数返回一个promise：

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

可以结合linter rule来避免promise链的错误。

【讨论】：