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

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）只有在以下情况下才会被捕获：

a .catch 被添加到该 Promise 表达式的末尾，或者
Promise 表达式在异步函数或 .then 中 returned，异步函数的调用者或 .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吗？如果不是，那么只 return 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 或 returned 的 Promise 将其错误（或其解析值）渗透到异步函数的调用者。

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

Throwing errors in async await functions and catching from where it's called

javascript

asynchronous

async-await

reactjs

es6-promise