时间戳

首页 > 解决方案 > 如何使用脚本类型模块正确实现异步功能？

javascript - 如何使用脚本类型模块正确实现异步功能？

问题描述

在我的 html 文件中，我有一个模块类型的脚本标签，我通过 CDN 从 Firebase 导入函数。

一个这样的函数是一个称为 setDoc 的 await 函数。我需要在我编写的名为 save() 的函数中使用 setDoc，该函数由按钮触发。

我尝试过的：我得到的第一个错误是 save()“未在 HTMLButtonElement.onclick 中定义”

我将我的 save() 函数移动到一个单独的脚本标签（它不是模块类型）中，它现在可以工作并在单击按钮时触发。但是，即使我的 save() 以 async 为前缀，我也无法使用 await Firebase 函数，因为我需要在单独的脚本标记中再次导入 Firebase 函数。但是如果不将单独的脚本标签的类型设置为“模块”，我就无法导入 Firebase 函数。所以这对我来说是一个循环问题。

如何正确实施 await 方法 setDoc？

标签： javascriptfirebasegoogle-cloud-firestore

解决方案

您可以简单地导出保存方法并将其导入并保存在窗口中。由于模块中定义的任何内容对该模块都是私有的，因此需要在窗口上明确设置它。

https://codesandbox.io/s/stackoverflow-69083332-using-an-exported-function-as-an-event-handler-s9x9x

索引.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Exported Function as an event</title>
    <script type="module">
      import { save } from "./module.js";
      window.save = save;
    </script>
  </head>
  <body>
    <button onclick="save()">
      Save
    </button>
  </body>
</html>

模块.js

export async function save() {
  return new Promise((resolve) => {
    setTimeout(() => {
      alert("Saved");
      resolve();
    }, 1000);
  });
}

推荐阅读