React Native 如何将外部文件异步方法的错误冒泡到上层组件

• 异步方法调用未加await：同步try/catch无法捕获未等待的Promise抛出的错误，异步函数执行时会立即返回Promise实例，后续抛出的错误不会进入同步代码的捕获逻辑。
• 异步方法内部已拦截错误未抛出：pickImageAsync内部的catch已经捕获了错误，未主动向外抛出的话，外层无法感知到错误发生。

第一步：修改someFile.js中的异步方法，捕获后重新抛出错误 #

export async function pickImageAsync(onSend) {
  if (await getImagePickerPermissionAsync()) {
    let result;
    try {
      result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.Images,
        quality: 1,
      });
      console.log(result);
      if (!result.cancelled) {
        onSend([{ image: result.uri }]);
      }
    } catch (error) {
      console.log("could not select image: ", error);
      // 手动抛出错误，允许外层逻辑捕获
      throw error;
    }
  }
}

第二步：修改组件内的调用逻辑，添加await等待异步执行完成 #

import {
  pickImageAsync,
} from "./someFile";

export default class Component1 extends React.Component<any> {
  render() {
    const {  sendError } = this.props;

    // 将方法标记为async，支持内部使用await
    async function pickImage() {
      try {
        // 等待异步方法执行完成，此时抛出的错误会被外层try/catch捕获
        await pickImageAsync(onSend);
      } catch (error) {
        console.log("I am catching error: ", error);
        sendImageError(true);
      }
    }
    // 其余原有render逻辑保持不变
  }
}

如果getImagePickerPermissionAsync方法本身也会抛出错误，需要根据你的业务需求决定是在pickImageAsync内部捕获处理，还是继续向外抛出给组件层处理。

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