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

Question

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

例如，我有一个 React 组件，它调用从另一个模块导入的异步等待函数。当我在该函数中使用 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）：

• .catch 被添加到 Promise 表达式的末尾，或者
• 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 将使其错误（或其解析值）渗透到异步函数的调用者。