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

promiseFunction1({
  year: unref(year),
})
  .then((res) => {
    if (res.status === 200) {
      return promiseFunction2(res.data?.name || "");
    }
  })
  .then((res) => {
    if (res.status === 200) {
      const getUserInfo = userInfoResult.data;
      // ... 具体操作
    }
  })
  // 异常捕获
  .catch((error) => console.error(error));

async function handleUserInfo() {
  try {
    const userResult = await promiseFunction1({ year: unref(year) });
    if (userResult.status !== 200) return;
    const userInfoResult = await promiseFunction2(res.data?.name || "");
    if (userInfoResult.status !== 200) return;
    getUserInfo = userInfoResult.data;
    // ... 具体操作
  } catch (error) {
    console.error(error);
  }
}

import to from 'await-to-js';
async function handleUserInfo() {
    const [userError, userResult] = await promiseFunction1({ year: unref(year) })
    if (userResult.status !== 200) return 
    const [userInfoError, userInfoResult] = await promiseFunction2(res.data?.name || "")
    if (userInfoResult.status !== 200) return 
    getUserInfo = userInfoResult.data
    // ... 具体操作
}

export function to<T, U = Error> (
  promise: Promise<T>,
  errorExt?: object // 传递给 err 对象的附加信息
): Promise<[U, undefined] | [null, T]> {
  return promise
    .then<[null, T]>((data: T) => [null, data])
    .catch<[U, undefined]>((err: U) => {
      if (errorExt) {
        const parsedError = Object.assign({}, err, errorExt);
        return [parsedError, undefined];
      }
      return [err, undefined];
    });
}
export default to;

// errorHandler 使用示例
import Vue from 'vue'
// 配置项形式：'development' | ['development', 'production']
const { errorLog: needErrorLog } = settings
// 根据配置判断什么环境下需要捕获异常
function checkNeedErrorLog() {
  const env = process.env.NODE_ENV
  if (isString(needErrorLog)) {
    return env === needErrorLog
  }
  if (isArray(needErrorLog)) {
    return needErrorLog.includes(env)
  }
  return false
}
// 全局异常捕获
if (checkNeedErrorLog()) {
  Vue.config.errorHandler = function (err, vm, info) {
    Vue.nextTick(() => {
      console.error(`[${projectName}]: ${err}。`, `Vue info: ${info}`, vm)
    })
  }
}

app.config.warnHandler = function(msg, vm, trace) {
  // `trace` 是组件的继承关系追踪
}