Question

我们如何从调用异步等待函数的地方捕获错误？

例如，我有一个 React 组件，它调用从另一个模块导入的 async-await 函数。当我在该函数中使用 Promise.reject("An unknown has occurred"); 时，为什么在我的 React 组件中无法在 asyncAwaitFunction.catch((e)=>console.log(e)) 中收到错误？

我什至尝试过 throw "An unknown occured"，但似乎不起作用。

反应组件

const handleSubmit = async (e) => {
    e.preventDefault();
    add(formData, code)
      .then(() => router.push("/dashboard/manage"))
      .catch((e) => setError(e)); //I want error to be catched here
  };

functions.js

export const addUser = async (details, code) => {

 const isExist = await isUser(code);

 if (!isExist) {

  const add = db.batch();    //firebase batch write

  add.set(userID(code), details);    //Add details to databse

  add.commit()
   .catch((e)=> {
   console.log(e);    // error occurs confirmed
   Promise.reject("Unknown error occurred"); //this does't get catched in component.
  });
    
 } else {
   Promise.reject("Already Exists!"); 
 }
};

Answer 1

被拒绝的 Promise（来自您构建的被拒绝的 Promise，或来自 Promise.reject）只会在以下情况下被捕获：

在该 Promise 表达式的末尾添加一个 .catch，或者
该 Promise 表达式在异步函数或 .then 内返回，并且在异步函数的调用者或 .then 回调之后，有一个 .catch

因此，您应该更改为：

export const addUser = async (details, code) => {
   const isExist = await isUser(code);
   if (isExist) {
      return Promise.reject('Already Exists!');
   }

   const add = db.batch();    //firebase batch write
   add.set(userID(code), details);    //Add details to databse
   return add.commit().catch((e) => {
      console.log(e);    // error occurs confirmed
      return Promise.reject("Unknown error occurred");
   });
};

但是您真的需要登录.commit().catch吗？如果没有，只返回 commit Promise 并在调用者中捕获会更清晰：

export const addUser = async (details, code) => {
   const isExist = await isUser(code);
   if (isExist) {
      return Promise.reject('Already Exists!');
   }

   const add = db.batch();    //firebase batch write
   add.set(userID(code), details);    //Add details to databse
   return add.commit();
};

从异步函数awaited 或返回的 Promise 将使其错误（或其解析值）渗透到异步函数的调用者。

在异步等待函数中抛出错误并从调用它的地方捕获

1 个答案: