Ожидать асинхронный JavaScript в блоке запуска Angularjs

Question

Я запускаю некоторый код инициализации для заполнения моего начального состояния приложения в блоке run ().Для начального состояния приложения требуется HTTP-вызов для извлечения некоторых данных для заполнения состояния, однако, блок run выполняется и загружает приложение до разрешения обещания HTTP, поэтому мое начальное состояние страницы фактически не заполняется во время показа страницы.

Как «дождаться» инициализации состояния перед тем, как загрузить приложение?

const Run = (StoreService, ContentService) => {
  'ngInject';

  let appState = StoreService.getState();
  // Initialise Application State
  if (!appState) {

    const initialState = {
      $valid: {},
      labels: []
    };    
    
    // THIS METHOD NEEDS TO RESOLVE BEFORE THE APPLICATION IS BOOTSTRAPPED
    ContentService.getAllContent()
      .then(data => {
        StoreService.setState({
          ...initialState,
          labels: data
        });
        console.log('Content Saved');
      })
      .catch(err => {
        console.log(err);
      });    
  }
  
angular.module('app').run(Run);

angular.bootstrap(document.getElementById('app'), ['app'], {
  strictDi: true
});

Answer 1

Вам просто нужно поставить await перед обещанием (или заявлением, которое возвращает обещание), которое вы хотите ожидать. Имейте в виду, что ваша программа может делать другие вещи, когда вы делаете это. Также вам придется ждать всего, что нужно ожидать, включая http-вызов. Подробнее здесь

В вашем случае вам может понадобиться обработать

ContentService.getAllContent()
      .then(data => {
        StoreService.setState({
          ...initialState,
          labels: data
        });
        console.log('Content Saved');
      })
      .catch(err => {
        console.log(err);
      });

`

по-разному. Вместо .then() вы могли бы ожидать его, и, так как он возвращает значение при разрешении, вы можете поместить data присвоение переменной впереди. Тогда просто напишите логику после него.

try {
    const data = await ContentService.getAllContent();
    StoreService.setState({
        ...initialState,
        labels: data
    });
    console.log('Content Saved');
} catch (err) {
    console.log(err);
}

Вполне возможно, что вам также придется сделать Run асинхронной, так что вам также придется ждать этого.

const Run = async (StoreService, ContentService) => ...

angular.module('app').run(await Run);

Более подробная информация о ожидании здесь