如何将 Promise<string> 分配给 String 类型答案

【问题标题】：How can I assign a Promise<string> to a String type如何将 Promise<string> 分配给 String 类型
【发布时间】：2020-11-30 16:11:12
【问题描述】：

我对 Javascript 和 React 世界非常陌生。我目前正在使用 Ionic 框架构建一个应用程序。它正在使用现有的 firebase 项目。

我正在尝试从 firebase 存储中获取头像图像，在我的 react 组件中使用此功能：

  async function getAvatarRef(avatarId: string): Promise<String> {
    const avatarUrl = await avatarsRef.child(avatarId).getDownloadURL();
    return avatarUrl.toString();
  }

然后我调用该函数以使用从 Firebase Auth 获取的用户 ID 获取下载 URL：

<IonImg src={getAvatarRef(child.avatarId)} />

我的问题是该函数返回一个 Promise<string> 但来自 IonImage 的 src 属性只需要一个简单的 String 类型

这是我得到的错误：Type 'Promise<string>' is not assignable to type 'string'.

我已经看遍了，但似乎找不到解决方案。

这里有人有什么想法吗？

【问题讨论】：

所有异步函数总是返回一个异步解析的承诺。您将无法使其同步 - 最终的承诺必须等待或以某种方式处理。
这能回答你的问题吗？ How do I return the response from an asynchronous call?

标签： javascript reactjs typescript ionic-framework firebase-storage

【解决方案1】：

你正在做的是一个效果。您正在从服务器获取数据并将其呈现在您的组件中。

如果您正在使用功能组件，您想看看useState 和useEffect 挂钩。对于类组件，您需要在组件上使用状态和生命周期方法。

本质上，您的 src 属性应该是一个状态项（在组件的生命周期内可能会发生变化，需要做出反应以更新 DOM），您可以将其初始化为空字符串或本地占位符图像。

然后你的效果代码会更新你的状态值，react 会告诉 DOM 发生了什么变化。

编辑：我应该补充一点，在 useEffect 钩子中使用异步函数没有任何问题。请注意，回调函数 useEffect 期望不能是异步的。但是没有什么能阻止你在回调中放置一个异步函数并在那里调用它。或者使用异步 IIFE。两者都是 React 中的常见模式...

【讨论】：

【解决方案2】：

React 钩子适用于这种情况。这是使用您的代码 sn-ps 的示例

function YourComp() {
      const [avatarUrl, setAvatarUrl] = useState<string>('');

      // run effect once 
     useEffect(() => {
        getUrl();
      }, []);
         
      async function getAvatarRef(avatarId: string): Promise<String> {
        const avatarUrl = await avatarsRef.child(avatarId).getDownloadURL();
        return avatarUrl.toString();
      }

     // Resolve Promise<string> to string
      const getUrl = (): void => getAvatarRef(
       child.avatarId
      ).then((res) =>
        setAvatarUrl(res.avatarUrl)
      );


     
      return <IonImg src={avatarUrl} />
    }

【讨论】：

【解决方案3】：

而是先调用promise，然后使用结果设置src

getAvatarRef(child.avatarId).then(src=> someImg.src=src)

【讨论】：