Javascript запустить функцию, как только данные обновляются?

Question

Поэтому, когда мое веб-приложение открывается, компонент A выполняет вызов API, результат которого он хранит в каком-то месте. Существует еще один javascript компонент B, которому необходимо значение этой переменной. Как B может получить доступ к переменной, как только данные будут обновлены. В настоящее время мне пришлось прибегнуть к добавлению функции setInterval в B, чтобы непрерывно прослушивать изменения значений переменных, но я надеялся на лучшее решение. Поможет ли обещания каким-то образом? Любая помощь будет оценена. Примечание. Компонент A и компонент B не связаны между собой. Компонент A не может вызывать методы / данные компонента B и, следовательно, должен был хранить данные на третьем месте.

Answer 1

Да, обещания могут помочь, просто используйте async / await в обоих компонентах.

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

Вы можете заставить B вызывать метод A и ждать его завершения.

await A()

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

Вы также можете работать с событиями, так как B передает функцию обратного вызова в A, которая регистрирует и вызывает это когда это будет сделано.

let callback = null

function AReady(cb){ callback =  cb } 

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

Если они вообще не имеют никакого соединения, вам нужно будет их установить. Если они являются модулями, вы можете экспортировать AReady. Если они находятся в окне, вам нужно будет установить window.AReady = AReady, описывая метод (также, B необходимо загрузить после A или дождаться document.ready)