在自定义事件详细信息中传递承诺

Question

我正在尝试通过自定义事件的 detail 属性传递 Promise 对象。 自定义事件在不共享相同全局上下文的两个脚本之间传递 - 一个是扩展的内容脚本，另一个是主网站脚本。

scriptA.js

async function myFunc() {...}

document.addEventListener('eventA', function (event) {
    const outputEvent = new CustomEvent('eventB', { detail: { promise: myFunc() } });
    document.dispatchEvent(outputEvent);
});

scriptB.js

document.addEventListener('eventB', async function (event) {
    const { promise } = event.detail;
    const result = await promise;
    console.log('result', result);
});

然后我尝试调用它（从 scriptB 或从第三个不相关的脚本，在 scriptA 之后 和 scriptB 已加载）：

document.dispatchEvent(new CustomEvent('eventA'));

当我在分派事件之前打印 scriptA 中的 detail 对象时，它正确显示了 Promise 对象，但它没有到达scriptB 根本没有 - detail 属性以 null 形式到达。

我在这里错过了什么吗？

---

当我创建一个沙箱来复制它时，它工作正常。

然而，在我的实际代码中，事实并非如此。以下是 Chrome 调试器的屏幕截图：

在调度部分：

在监听器部分：

如果我不在分派的detail中包含response（这是一个Promise对象），那么一切正确到达。

Answer 1

首先，感谢沙箱 - 它确实加快了速度，并明确了您当前面临的

问题，

async function myFunc() {...}

document.addEventListener('eventA', function (event) {
    const outputEvent = new CustomEvent('eventB', { detail: { promise: myFunc() } });
    document.dispatchEvent(outputEvent);
});

我认为问题就在

{ detail: { promise: myFunc() } }

这里，您附加了调用承诺..为什么不只分配委托？

{ detail: { promise: myFunc } }

这行的含义是：将引用分配给我的承诺，但儿子（尚未）调用它。这似乎是你的初衷，因为你后来使用了这段代码

document.addEventListener('eventB', async function (event) {
    const { promise } = event.detail;
    const result = await promise;
    console.log('result', result);
});

，据我的理解，这应该是

const { promise } = event.detail; // promise here is the delegation to your function
const result = await promise(); // properly invoke it and wait for it's result

......你不能在一个代码块中调用一个承诺并在另一个代码块中等待结果。希望能满足您最初的要求