Проблема с асинхронным вызовом в Angular JS

Question

В моем угловом приложении в приведенном ниже сценарии я столкнулся с проблемой.

Есть три файла

mainCtrl.js

При загрузке приложения будет запущен init() mainCtl.js, который вызовет flowService, как это

flowService.configureSteps();

Который вызовет flowService и совершит серверный вызов для получения данных.

flowService.js

function configureSteps() {
    salesService.getSalesOrder().then(function(response) {
            salesService.setSalesOrder(response);
    });
}

Это сохранит salesOrder в сервисе, который должен быть извлечен в subCntrl

subCtrl.js

В инициализации subCntrl я пытаюсь получить заказ на продажу, который я сохранил в сервисе.

function init() {
   salesService.getSalesOrder();
}

Выпуск

Когда я нажимаю на ссылку вот так

http://www.myapp.com/review#/subpage

1. Это сделает попадание в mainCtrl
2. Оттуда он позвонит в службу и сделает звонок на сервер
3. Поскольку он асинхронный, он будет перенаправлен на subCntrl
4. Он попытается получить заказ на продажу, который еще не получен с сервера.

Как это можно сделать синхронным.

Answer 1

Вы можете переместить ваш mainCtrl.js flowService.configureSteps() вызов в:

1. функция состояния resol ( UI-Router )
2. $ routeChangeStart обратный вызов события ( NgRoute )

С помощью состояния UI-Router вы можете установить функцию разрешения, которая будет выполняться за до доступа к указанному состоянию, делая возможным выполнение синхронных вещей до создания экземпляра контроллера этого состояния.

В вашем случае вы можете сделать flowService.configureSteps() до доступа к mainCtrl и сделать salesService.getSalesOrder() до доступа к subCtrl (но обязательно после сохранения предыдущего заказа).

---

С помощью ngRoute вы можете определить routeChange callback как:

$rootScope.$on("$routeChangeStart", function (event, currentRoute, previousRoute) {
    //
}); 

в этом обратном вызове вы можете выполнить свою логику до активации маршрута, будучи уверенным, что у вас будет то, что вам нужно, когда вы попадете на страницу.

---

Поделитесь своей конфигурацией маршрута / состояния, если вам нужна дополнительная помощь.

Answer 2

Я реализовал, используя обещание.

flowService.js

 function configureSteps() {
        var salesPromise = salesService.getSalesOrder().then(function(response) {
                salesService.setSalesOrder(response);
        });
        return salesPromise ;
    }

salesService.setPromise(configureSteps()); // Saves the promise to a service

subCtrl.js

function init() {
 salesService.getPromise().then(function() {
       salesService.getSalesOrder(); // This will be called only on resolve of the promise.
    });

}

Запишите setPromise и getPromise в сервисе.

Answer 3

Используйте события, чтобы сообщить subCtrl.js, что значение получено.Теперь, поскольку он все еще работает в цикле $digest, вы можете легко обрабатывать пользовательский интерфейс subCtrl.js.Введите $rootScope в контроллере и сервисе.

flowService.js

function configureSteps() {
    salesService.getSalesOrder().then(function(response) {
            salesService.setSalesOrder(response);
            $rootScope.$emit('order-recieved');
    });
}

subCtrl.js

function init() {
   $rootScope.$on('order-recieved',function(){
      salesService.getSalesOrder();
   })
}