时间戳

首页 > 解决方案 > Angular JS中的异步调用问题

javascript - Angular JS中的异步调用问题

问题描述

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

共有三个文件

mainCtrl.js

在应用程序加载时，init()将触发 mainCtl.js，它将像这样调用 flowService

flowService.configureSteps();

它将调用 flowService 并进行服务器调用以获取数据。

流服务.js

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

这会将 保存salesOrder到要在subCntrl

subCtrl.js

在 subCntrl 的初始化中，我试图获取我保存在服务中的 salesOrder。

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

问题

当我像这样点击网址时

http://www.myapp.com/review#/subpage
  1. 它会打到 mainCtrl
  2. 从那里它将调用服务并进行服务器调用
  3. 由于它是异步的，它将被重定向到 subCntrl
  4. 它将尝试检索尚未从服务器接收到的 salesOrder。

这怎么能做到同步。?

标签： javascriptangularjsajaxasynchronous

解决方案

您可以将mainCtrl.js flowService.configureSteps()调用移至：

  1. 解析状态函数（UI-Router）
  2. $routeChangeStart事件回调（NgRoute）

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

在您的情况下，您可以flowService.configureSteps()在访问 mainCtrl 之前执行您的操作，并salesService.getSalesOrder()在访问subCtrl之前执行此操作（但肯定是在上一个订单保存之后）。

使用 ngRoute，您可以将routeChange 回调定义为：

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

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

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

推荐阅读