如何不使用await或Promise.catch本地捕获未处理的Promise rejection

首先要明确：未加await的async函数抛出的错误属于异步微任务错误，同步try/catch块执行完成时异步任务还没返回结果，因此原生无法直接捕获。你要求的「业务侧不用手动写Promise.catch或await」可以实现，只需要把捕获逻辑封装到公共工具层，底层还是会用到catch做统一处理，业务代码无需感知。

方案：自定义Hook + 异步函数包装器，对接ErrorBoundary #

React的ErrorBoundary只能捕获渲染阶段、生命周期函数、Hook回调同步执行过程中抛出的错误，要让异步错误被ErrorBoundary捕获，只需要把异步错误抛到React的同步执行上下文即可。

步骤1：实现错误抛出Hook #

import { useCallback, useState } from 'react';

// 作用：把异步错误抛到React同步更新流程，触发ErrorBoundary
const useAsyncErrorHandler = () => {
  const [, setErrorState] = useState();
  return useCallback((error) => {
    // 状态更新函数里抛出错误，会被ErrorBoundary捕获
    setErrorState(() => {
      throw error;
    });
  }, []);
};

步骤2：实现异步函数自动包装工具 #

// 作用：给异步函数自动加错误捕获，不用业务侧手动写catch
const wrapAsyncTask = (asyncFn, errorHandler) => {
  return (...args) => {
    // 底层统一处理catch，业务侧不用感知
    asyncFn(...args).catch((err) => errorHandler(err));
  };
};

步骤3：业务组件中使用 #

import { useEffect } from 'react';

const asyncThrowSampleApiFunction = async () => {
  throw new Error('SOMETHING');
};

const MyComponent = () => {
  const handleAsyncError = useAsyncErrorHandler();

  useEffect(() => {
    // 直接调用包装后的函数，不用手写await或catch
    const callApi = wrapAsyncTask(asyncThrowSampleApiFunction, handleAsyncError);
    callApi();
  }, []);

  return <div>组件内容</div>;
};

步骤4：正常实现ErrorBoundary即可捕获上述异步错误 #

标准ErrorBoundary示例：

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.log('捕获到异步错误:', error);
  }

  render() {
    if (this.state.hasError) {
      return <h1>出现异常了</h1>;
    }
    return this.props.children;
  }
}

使用的时候用ErrorBoundary包裹你的业务组件即可：

<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

如果想进一步简化业务代码，可以把包装逻辑封装到自定义的useEffect替代Hook里，业务侧直接用封装后的useAsyncEffect就能自动处理所有异步错误，连包装步骤都可以省略。

内容的提问来源于stack exchange，提问作者2doo