TypeScript中如何为async异步函数调用添加错误处理

是否需要移除await关键字 #

不需要移除。
await是你获取异步操作结果、保证执行时序的必要关键字：如果去掉await，你拿到的只会是pending状态的Promise对象，既没法读取返回的SelectResponse结构判断业务成功/失败，也没法捕获异步执行过程中抛出的运行时异常。本身事件回调已经标记为async，内部使用await不会产生阻塞主线程的问题，完全符合异步代码的编写规范。

错误处理的具体实现 #

selectAsync()存在两类需要处理的错误场景：

• 业务错误：Promise正常resolve，但返回success: false的结果，携带具体的错误类型和错误信息
• 运行时异常：Promise直接reject，比如底层API调用失败、参数非法、网络异常等未被业务逻辑捕获的错误

你可以用try...catch搭配返回值判断覆盖所有错误场景，同时建议补全原来注释中标注的事件监听清理逻辑，避免内存泄漏。修改后的完整代码如下：

React.useEffect(() => {
  if (!prepAttrsRef.current) return;

  // 抽离事件处理函数，方便后续解绑
  const onDocumentStateChanged = async (evt: CustomEvent<FlowDocumentState>) => {
    if (evt.detail.draftState !== 'all-changes-published') return;
    
    dispatch(updateIsFlowpublished(true));
    try {
      const cleanSteps = await prepAttrsRef.current!.getAllStepsOfTypeAsync('clean');
      const firstCleanStep = cleanSteps?.[0];
      if (!firstCleanStep) return;

      const selectResult = await firstCleanStep.selectAsync();
      // 处理业务层面的失败返回
      if (!selectResult.success) {
        // 替换为你实际的错误处理逻辑：错误上报、用户提示、降级逻辑均可
        console.error('选中清理步骤失败', {
          errorType: selectResult.errorType,
          errorMsg: selectResult.errorMessage
        });
        return;
      }

      // selectAsync执行成功后的后续逻辑可写在这里
    } catch (err) {
      // 捕获所有异步操作抛出的运行时异常，避免未捕获Promise错误导致页面崩溃
      console.error('流程发布后初始化清理步骤异常', err);
    }
  };

  prepAttrsRef.current.addEventListener('documentstatechanged', onDocumentStateChanged);

  return () => {
    // 组件卸载时移除事件监听，避免内存泄漏
    prepAttrsRef.current?.removeEventListener('documentstatechanged', onDocumentStateChanged);
  };
}, []);

关键逻辑说明 #

• 用try...catch块包裹所有异步操作，同时覆盖getAllStepsOfTypeAsync和selectAsync可能抛出的reject异常
• 拿到selectAsync的返回值后，优先判断success字段，失败时读取错误信息做对应业务处理
• 抽离事件回调的具名函数，补全useEffect清理阶段的事件解绑逻辑，修复原代码中匿名事件监听无法移除的问题

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