Vue中如何优雅的捕获 Promise 异常详解

在 Vue 中，可以通过 Promise 处理异步操作。当 Promise 中发生异常时，Vue 会抛出一个全局的未捕获异常的错误信息。为了更好的捕获 Promise 异常，我们可以采用一些优雅的方法。

优雅的捕获 Promise 异常

Vue 2.6 后提供了一个全局错误处理器（config.errorHandler），我们可以利用这个处理器进行全局的异常捕获。在应用启动时，我们可以通过以下代码将全局错误处理器设置为我们自定义的方法。

Vue.config.errorHandler = function(err, vm, info) {
  // 错误处理逻辑
  console.log("[Global Error Handler]", err, vm, info);
};

这个错误处理器函数接收了三个参数：

err：捕获到的错误对象；
vm：Vue 实例；
info：Vue 特定的错误信息，比如错误所在的钩子函数、Vue 版本等等。

我们可以在这个函数中书写我们自己的错误处理逻辑，比如将错误信息上传至服务器。

另一种方式是针对特定的 Promise 进行异常捕获。我们可以为每个 Promise 对象设置一个 catch 方法，当 Promise 对象发生异常时，就会自动调用这个方法。例如：

axios.get("/api/user")
  .then((res) => {
    console.log(res.data);
  })
  .catch((err) => {
    console.error(err);
    // 处理异常逻辑
  });

Vue 中的错误处理

在 Vue 中，经常使用的异步请求库是 Axios。对于 Axios 中的 Promise，我们可以利用 Vue 的 mixin 机制在全局进行异常捕获。在创建 Axios 对象时，我们可以添加一个拦截器，在请求出现异常时，调用全局错误处理函数。以下是示例代码：

// src/plugins/http.js
import axios from "axios";
import config from "../config";

const http = axios.create({
  baseURL: config.apiBaseUrl,
});

http.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error && error.response) {
      const status = error.response.status;

      // 根据状态码进行错误处理
      switch (status) {
        case 401:
          // 处理 401 错误
          break;
        case 404:
          // 处理 404 错误
          break;
        default:
          // 全局错误处理函数
          const message = `发生错误: ${error.response.data.message}`;
          Vue.prototype.$message.error(message);
          Vue.prototype.$log.error(error.response);
      }
    }
    return Promise.reject(error.response);
  }
);

export default http;

在这个拦截器函数中，我们进行了状态码判断，并进行了相应的处理。如果无法处理，则将错误信息交由全局错误处理函数处理。这种方式可以让我们在页面中更加优雅的处理异常信息。