MacOS/Safari JavaScript 异步/等待失败

Question

尝试查看是否只有我遇到这种情况，但 Mac Outlook 中我的加载项的用户突然报告说我使用 displayDialogAsync 加载的对话框变成空白。

因此，我重建了被调用的页面，以便我可以在 Safari 中调用它，而无需 Office API。 该页面在 Chrome、Edge 和 FireFox 中加载并运行良好。但在 Safari 中却失败。当我调用 aync 函数时，它会特别失败，并且我传递的参数（无论类型）始终是未定义的。所以，我知道它不是 Office-js 库，因为它只发生在 Safari 中。

因此，我在 Safari (outlook.office365.com) 中打开了我的邮箱，看看是否可以收集更多信息来了解对话框无法加载的原因，也许可以获取控制台信息。然后，当我从 Outlook Online 单击我的加载项时，任务窗格打开并立即轰炸一行：Office.context.mailbox.item.getBodyAsync()。我看到 Office 已初始化，但随后我在异步函数中收集邮件项目的详细信息，并且我看到以异步方式进行的任何调用都会失败 - 但仅限于 Safari。所有这些相同的代码在 Chrome、Edge 和 FireFox 中完全按照预期工作。

更奇怪的是，如果我将所有变量的副本放在全局空间中，当我看到 async/await 函数中的参数未定义并将其分配给全局副本时，viola - 这一切都可以在 Safari 中工作。

这是调用我的异步函数的代码：

window.addEventListener("onload", async () => {
      // stuff here...
      // then...
      Office.onReady(async () => {
        const parentData = JSON.parse(window.atob(decodeURIComponent(o_q_s_data)));
        // NOTE: console.log() here to output parentData is a valid
        //       object and parentData.data is a stringified JSON 
        //       object, and again all this works in Chrome, FF, and 
        //       Edge, but not Safari
        await buildForm(null, parentData);
      });
});

这是失败的代码：

buildForm = async (t, parentData) => {
  // in Safari and only Safari, when I get here 
  // parentData is "undefined"
  const data = JSON.parse(parentData.data); 
...
};

更糟糕的是，当我在一两个月前进行完整测试时，这一切在 Mac Outlook 中都 100% 有效。而且在插入商店之前它就可以工作，因为它经过了微软的测试。所以，我很茫然。

那么，最近还有其他人在 Mac Safari/Web kit/Mac Outlook 中遇到问题吗？ 有什么想法吗？

-- 继续 --

当我深入研究时，我发现基于 Mac Safari 的 JavaScript 代码存在各种不好的东西。我有一个功能可以加密用户 PIN，例如通过 AES-CBC。 Safari JavaScript 生成的值与同一台计算机上通过 Chrome、Edge、FireFox 生成的相同代码不兼容。它与我的后端 PHP 不兼容。

我还发现另外两个地方传递给await 函数的值是未定义的。我从 HTML 页面上的两个输入框中获取 PIN 和 KEY。然后，我调用等待函数（KEY，PIN），每次 KEY 都是“未定义”。我交换了值函数（PIN，KEY），然后 PIN 未定义。

此时我会说这是我的机器和内存损坏，但我的用户向我报告了一个错误，我追踪到这些异步/等待函数中的第一个值是“未定义”的事实。

既然这样的问题似乎没有引起轩然大波，那一定是我的代码。我正在做的事情在每个浏览器中都很好，但 Safari 却出现了。 :( 我正在努力简化代码...

-- 更新 --

因此，我通过 ES6 动态构建所有 DHTML 页面。我进行了几次异步调用来调用后端并异步更新页面组件，因此页面已加载，您会看到内容正在填充。一旦所有部分都在那里，按钮就会启用，用户单击按钮，然后他们会得到一个表单。他们将信息提供到两个输入框中，然后按提交按钮。提交按钮收集值，创建后端包装器的实例，并异步调用对象上的函数。这就是它失败的地方。进入异步函数的值。

修复：在进行异步函数调用之前，将所有值添加到构造函数或非异步 getter/setter 中。设置所有值后，我将无参数调用 async/await 函数。现在到处都可以使用。

丑陋，但这就是它所需要的。

Answer 1

因此，我通过 ES6 动态构建所有 DHTML 页面。我进行了几次异步调用来调用后端并异步更新页面组件，因此页面已加载，您会看到内容正在填充。一旦所有部分都在那里，按钮就会启用，用户单击按钮，然后他们会得到一个表单。他们将信息提供到两个输入框中，然后按提交按钮。提交按钮收集值，创建后端包装器的实例，并异步调用对象上的函数。这就是它失败的地方。进入异步函数的值。

修复：在进行异步函数调用之前，将所有值添加到构造函数或非异步 getter/setter 中。设置所有值后，我将无参数调用 async/await 函数。现在到处都可以使用。

丑陋，但这就是它所需要的。