Angular JS

时间:2018-05-09 10:18:53

标签: javascript angularjs ajax asynchronous

在我的角度应用程序中,在下面的场景中,我遇到了一个问题。

有三个文件

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的init中,我正在尝试获取已保存在服务中的salesOrder。

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

问题

当我像这样点击网址时

http://www.myapp.com/review#/subpage
  1. 会点击mainCtrl
  2. 从那里开始调用服务并进行服务器调用
  3. 由于它是异步的,因此会被重定向到subCntrl
  4. 它将尝试检索尚未从服务器收到的salesOrder。
  5. 如何使其同步化。 ?

2 个答案:

答案 0 :(得分:0)

您可以将 mainCtrl.js flowService.configureSteps()来电转移到:

  1. 解决状态函数(UI-Router
  2. $ routeChangeStart 事件回调(NgRoute
  3. 使用UI-Router状态,您可以设置将在访问引用状态之前执行的解析功能,从而可以在实例化该状态之前执行 syncronous 内容#39; s控制器。

    在您的情况下,您可以在访问 mainCtrl 之前执行flowService.configureSteps()并在访问 subCtrl 之前执行salesService.getSalesOrder()(但肯定会在以前的订单保存)。

    使用ngRoute,您可以将 routeChange回调定义为:

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

    在此回调中,您可以在路由激活之前执行逻辑,确保在您点击页面时获得所需内容。

    如果您需要进一步的帮助,请分享您的路线/州配置。

答案 1 :(得分:0)

我已经使用了promise。

<强> 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.
    });

}

在服务中写下setPromisegetPromise