时间戳

首页 > 解决方案 > 在异步等待函数中抛出错误并从调用它的位置捕获

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

问题描述

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

例如，我有一个 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
  };

函数.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!"); 
 }
};

标签： javascriptreactjsasynchronousasync-awaites6-promise

解决方案

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

  • a.catch被添加到该 Promise 表达式的末尾，或
  • 该 Promise 表达式在 async 函数或 a 中返回.then，并且 async 函数的调用者或在.then回调之后，有 a.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吗？如果没有，只返回commitPromise 并在调用者中捕获会更干净：

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();
};

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

推荐阅读