Angular JS中的异步调用问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Angular JS中的异步调用问题相关的知识,希望对你有一定的参考价值。

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

有三个文件

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。

怎样才能使它同步。 ?

答案

使用事件让subCtrl.js知道已收到该值。现在,由于它仍然在$digest循环下运行,因此您可以轻松处理subCtrl.js的UI。在控制器和服务中注入$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();
   })
}
另一答案

您可以将mainCtrl.js flowService.configureSteps()调用移动到:

  1. 解决状态函数(UI-Router
  2. $ routeChangeStart事件回调(NgRoute

使用UI-Router状态,您可以设置将在访问引用状态之前执行的解析函数,从而可以在实例化该状态的控制器之前执行同步操作。

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


使用ngRoute,您可以将路由更改回调定义为:

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

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


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

另一答案

我已经实现了使用承诺。

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

以上是关于Angular JS中的异步调用问题的主要内容,如果未能解决你的问题,请参考以下文章

识别 ASP.NET MVC 代码中的 Angular js AJAX 调用

Angular 打字稿异步 HTTPClient 调用

Angular 2 测试 - 异步函数调用 - 何时使用

angularJS使用ocLazyLoad实现js延迟加载

我应该在 Fragment 中的啥生命周期状态下执行异步任务?

在启动 Angular JS 之前等待异步任务完成