如何获取 async/await 函数返回的值？答案

【问题标题】：How to get the value returned by an async/await function?如何获取 async/await 函数返回的值？
【发布时间】：2020-12-27 10:13:02
【问题描述】：

我知道 async/await 函数只返回一个 Promise，并且我需要添加一个 .then() 来使用该值更新变量或状态。但是在 React 应用程序中，它要求我执行 useEffect 然后更新状态。如果我返回一个格式化的对象如：{loading, error, data}，是否可以这样直接访问：

const {loading, error, data} = fetchData()

如何允许从这样的函数直接访问对象：

async function foo(){
try{
const res = await api("/user/foo")
return {
  loading:false,
  error:false,
  data: res.data
  }
 }
 catch{
 return trhow new Error()
 }
 }

【问题讨论】：

没有。您需要等待它或使用 then。
这能回答你的问题吗？ How do I return the response from an asynchronous call?
我不能在异步函数之外等待。如果我必须使用 then，那么在我的组件之外处理它的干净/好方法是什么，以便我可以直接调用结果并对其进行解构？

标签： reactjs asynchronous async-await

【解决方案1】：

如果您想要从异步函数中获取对象，那么不使用“await”或“.then”是不可能的，因此您最好的选择是将异步函数的返回值存储在一个状态中并且使用传递给该状态的格式化对象。如果你想在 useEffect 处理程序中使用它是不可能的，因为 react 会抛出警告或错误，绕过它是使用 useCallback 然后将 useCallback 传递给 useEffect 处理程序。

我希望这个答案是你的问题

【讨论】：

【解决方案2】：

在处理 useEffect 和一些你必须等待的 promise 函数 foo 时，你可以处理以下方法：

async/await 方法，声明一个函数 baz 然后调用它：

useEffect(() => {
  async function baz() {
    try {
      const res = await foo()
      // do something with res
    } catch (error) {
      console.log(error)
    }
  }
  
  await baz()
}, [])

链接承诺：

useEffect(() => {
  baz()
    .then(res => {
       // do something with res
     })
    .catch(console.log)
}, [])

【讨论】：