Javascript 在数据更新后立即运行 function？

Question

因此，当我的 web 应用程序打开时，组件 A 会发出 api 调用结果，并将结果存储在某个地方。 还有另一个 javascript 组件 B 需要该变量的值。 B 如何在数据更新后立即访问变量。 目前，我不得不求助于在 B 中添加 setInterval function 以不断监听变量值的变化，但我希望有更好的解决方案。 承诺会在某种程度上有所帮助吗？ 任何帮助，将不胜感激。 注意：组件 A 和组件 B 未连接。 组件 A 无法调用组件 B 的方法/数据，因此不得不将数据保存在第三个位置。

Answer 1

您可以让 B 调用 A 方法并等待它结束。

await A()

async function A(){
// ...things
    return data
}

您还可以使用事件，方法是 B 将回调 function 传递给 A，在完成后注册并调用它。

let callback = null

function AReady(cb){ callback =  cb } 

async function A(){
// ...things
     if(callback) callback(data)
}

如果他们根本没有任何联系，您将需要建立一个。 如果它们是模块，您可以导出AReady 。 如果它们在 window 上，则需要设置window.AReady = AReady ，使用方法（另外，B 需要在 A 之后加载，或者等待document.ready ）

Answer 2

某种全球通知系统会起作用。 您可以使用流行的第三方包，例如pubsub-js ，但您也可以自己实现一个简单的版本。

这是它如何工作的示例：

// Inside component B

// at startup
PubSub.subscribe('data from A', function(_, data) {
  // do stuff with data
});

// Inside component A

// load data, then
Pubsub.publish('data from A', data);

Answer 3

是的，promise 可以提供帮助，只需在两个组件中使用 async/await 即可。