Javascript 异步函数 return then-catch 承诺？

Question

简介

我是 javascript promises 的新手，我需要了解它们如何正确工作...

直到知道我一直在我的代码中这样做：

  const handleRefresh = () => {
    setIsRefreshing(true);

    fetchUserData()
      .then(async () => { <--------- Using then because I return a promise in fetchUserData
         await fetchUserPosts(); <------- Using await here
         setIsRefreshing(false);
      }).catch(err => { <--------- This will catch the error I have thrown in the function fetchUserPosts or inside the then body
       // TODO - Show error
       setIsRefreshing(false);
       console.log(err)
    );
  };

  const fetchUserData = async () => { <------ async function
    const { firebase } = props;

    const userId = firebase.getCurrentUser().uid;

    const documentRef = firebase.getDatabase().collection("users").doc(userId);

    // Fetch all the user information
    return documentRef <--------- Returning the promise here
      .get()
      .then((doc) => {
        if (doc.exists) {
          // Get all user data
          const data = doc.data();
          console.log(data);
          setUserData(data);
        }
      })
      .catch((err) => {
        throw err; <----------- Throwing error
      });
  };

我不知道我是否在做反模式...但基本上我需要知道这是否是一个好方法以及我这样做是否正确。

问题

我是否必须将 fetchUserData 函数声明为异步到 return 承诺？
我可以在 then/catch 正文中使用异步等待吗？

我可以这样做吗？

const handleRefresh = async () => {
 setIsRefreshing(true);

 await fetchUserData()
   .then(async () => { <--------- Using then because I return a promise in fetchUserData
      await fetchUserPosts(); <------- Using await here
   }).catch(err => { <--------- This will catch the error I have thrown in the function fetchUserPosts or inside the then body
     // TODO - Show error
     console.log(err)
   );
   setIsRefreshing(false);
};

如果有人指导我，我将不胜感激。谢谢

Answer 1

1.
函数可以 return Promise 而无需声明为 async 只要你不在其中等待，

2.
您不应该在 then 中使用 async-await，只需 return 一个 Promise，它将在以下 then、

中解决

3.
使用 async-await 语法时，会以声明方式等待 Promise，如下所示：

const handleRefresh = async () => {
  try
  {
    const a = await getA()
    // pass the result to another Promise
    const b = await getB(a)
    const c = await getC(b)
  
  } catch (error)
  {
    handleError(error)
  } 
};

Answer 2

单词async和await只是then和catch的语法糖。

这个：

  fetchUserData()
    .then(data => return data )
    .catch(error => return error)

相当于：

 async function getUserData() {
   const userData = await fetchUserData()

   return userData
 }

在这里你返回任何东西（成功或错误）。如果你想在这里处理错误，只需放一个 try/catch 子句。

  async function getUserData() {
   try {
     return await fetchUserData()
   } catch (e) {
     return e.message
   }
 }

请注意，您只能在 async 函数中使用 await 子句。

Javascript 异步函数 return then-catch 承诺？

Javascript async function return then-catch promise?

javascript

async-await

es6-promise

简介

问题