即使在使用 await [重复] 之后，Javascript 也难以使用承诺值

Posted 2023-02-22

【中文标题】即使在使用 await [重复] 之后，Javascript 也难以使用承诺值

【英文标题】：Javascript difficulty consuming promise values even after using await [duplicate]

【发布时间】：2021-10-25 21:46:16

【问题描述】：

我正在编写一个异步函数来使用 AWS 开发工具包查询 DynamoDB 表：

async function fetchData() 
  try 
    var params =  Key:  chart_name: "cambridge_rent" , TableName: "charts" ;
    const data = await docClient.get(params).promise();
    return data.Item.values;
   catch (err) 
    console.log("Failure", err.message);
  


const result = fetchData();

但是，我无法从包含 Promise 对象的 result 中提取值：

Promise  <state>: "pending" 
​
<state>: "fulfilled"
​
<value>: Array [ (95) […] ]

我正在尝试从以下位置提取值：<value>: Array [ (95) […] ]。我该怎么做？我目前的做法不正确吗？

【问题讨论】：

你正在以一种有点奇怪的方式使用async——你应该awaitfetchData()调用，或者你应该在promise对象上链接一个.then，然后做任何你需要的事情回调中的结果。

由于问题是在 React 的上下文中，所以不能在渲染阶段等待，所以看看：Using async/await inside a React functional component

【参考方案1】：

把const result = fetchData();改成const result = await fetchData();

【讨论】：

已经尝试过并收到此错误：Module parse failed: Cannot use keyword 'await' outside an async function (36:15)。我正在使用 React，这在组件之外。在组件内部这样做会导致我出现此错误：Unexpected reserved word 'await'.

【参考方案2】：

你可以的

async function fetchData() 
  try 
    var params =  Key:  chart_name: "cambridge_rent" , TableName: "charts" ;
    const data = await docClient.get(params).promise();
    return data.Item.values;
   catch (err) 
    console.log("Failure", err.message);
  


    fetchData().then((resp) => console.log(resp));

【讨论】：

非常感谢接受完整性

@mmz 请注意，如果在 React 组件的渲染阶段使用它，它会在每次组件渲染时获取，这是低效的，并且可能导致反模式（渲染应该是纯的）进入无限循环。

@EmileBergeron 指出。我在 useEffect 钩子中使用它对我有用

@mmz inside useEffect 就可以了！