如何从异步方法输出值

Question

我想创建一个异步方法 returns 像这样的图像路径：

const renderMasterThumb = async (masterAssetId) => {
    const masterAsset = await getAssetByIdAsync(masterAssetId);
    const path = masterAsset.path;
    return path;
  };

然后我这样调用方法：

<img
    src={`images/${(async () => {
    await getAssetByIdAsync(collection.masterAssetId);
    })()}`}
    alt="master thumb"
/>

然而，我得到的不是图像路径，而是一个 Promise 对象：

<img src="images/[object Promise]" alt="master thumb">

有人知道如何通过调用异步方法输出值（例如 'bart.jpg'）吗？

感谢您的帮助，

安东尼

Answer 1

你的 JSX 中的匿名 async 函数仍然是 returns 一个承诺，就像你正在调用的那个一样。你需要从根本上重构你的 React 组件。或者：

执行此操作的组件必须能够在还没有 getAssetByIdAsync 的结果时呈现（可能是一些“正在加载”占位符），或者
在该结果可用之前根本不应该呈现该组件，这意味着在父组件中调用 getAssetByIdAsync 而不是这个组件。

您需要这样做，以便有时间完成异步操作。在执行此操作的任何组件中，您都可以在对 getAssetByIdAsync 的调用中使用 .then 和 .catch 来处理它 returns.[= 的承诺的实现或拒绝。 16=]

如何从异步方法输出值

how to output value from async method

javascript

async-await

reactjs

es6-promise