角度处理不等待 http.get .then答案

【问题标题】：Angular processing not waiting on http.get .then角度处理不等待 http.get .then
【发布时间】：2015-10-07 14:07:00
【问题描述】：

我有一个问题，我的控制器似乎没有等待 http.get '.then'。我正在正确取回数据，但似乎在检索数据之前正在处理另一个函数。我浏览了很多帖子并尝试了这些帖子中提到的许多事情，但似乎没有帮助。我正在使用 PHP 来检索数据。

我有一个调用两个函数的 HTML 文件（我曾尝试使用一个，但当它不起作用时，我尝试拆分功能）。

调用的 HTML

<form editable-form name="editableForm" onaftersave="fetch();updateDetailsData()" >

控制器功能

$scope.fetch = function() {
    $http.get("api/checkSave/"+ JSON.stringify($scope.programDetails))
         .then(function(data) {
              $scope.okToSave = data.data.save;
              $scope.missFields = data.data.fields;
              console.log($scope.okToSave); // line #194
              console.log($scope.missFields); // line #195
        });
}

$scope.updateDetailsData = function(){
    console.log($scope.okToSave); // line #202
}

控制台中显示的内容：

undefined    // line 202
false        // line 194 - correct data
Object       // line 195 - correct data

如您所见，它似乎在 fetch 函数完成之前处理函数 updateDetailsData。我认为 then 应该让处理等到 get 完成 - 承诺返回。

我需要根据 $scope 变量中的值在 updateDetailsData 函数中进行一些处理，但是当它到达那里时，它们是未定义的。

有人可以帮忙吗？我确定这是我缺少的一些东西，但我想我已经尝试了这些论坛上提供的所有解决方案，但最终仍然得到相同的结果。

【问题讨论】：

标签： javascript php angularjs get

【解决方案1】：

问题来自：onaftersave="fetch(); updateDetailsData()"。 update 函数会在fetch 返回后立即执行，而不是在fetch解决后立即执行。

稍微修改你的功能：

function fetch () {
    return $http.get("api/checkSave/"+ JSON.stringify($scope.programDetails))
         .then(function(data) {
             // ...     
         });
}

$scope.fetchAndUpdate = function () {
    fetch().then(updateDetailsData);
}

在模板中：

<form editable-form name="editableForm" onaftersave="fetchAndUpdate()">

【讨论】：

我在尝试这句话时遇到错误“无法读取未定义的属性”...它似乎确实在处理 fetch 和 updateDetailsData（并且按照我所看到的正确顺序）。错误在 fetch().then(updateDetailsData) 行。
您是否在$http 调用之前添加了return？
对不起，你是对的，我没看到……是的，它可以按正确的顺序显示所有内容，而且只显示一次。谢谢！

【解决方案2】：

您正在使用 Promise，因此您必须连接到它们，它们不会阻塞：

<form editable-form name="editableForm" onaftersave="fetch().then(updateDetailsData)" >

控制器功能

$scope.fetch = function() {
    return $http.get("api/checkSave/"+ JSON.stringify($scope.programDetails))
         .then(function(data) {
              $scope.okToSave = data.data.save;
              $scope.missFields = data.data.fields;
              console.log($scope.okToSave); // line #194
              console.log($scope.missFields); // line #195
        });
}

$scope.updateDetailsData = function(){
    console.log($scope.okToSave); // line #202
}

【讨论】：

这似乎可行，但看起来函数被调用了两次。我想这不是什么大问题，因为它看起来好像正确填充了值。

【解决方案3】：

您的fetch 函数正在调用$http.get，它会异步调用您的服务器。这意味着调用将立即返回，它在等待服务器响应时不会阻塞（即停止代码执行）。这就是您使用.then 函数提供回调的原因。

按照您目前编写的方式，它按设计工作。如果您想在您的 then 代码之后执行 updateDetailsData 函数，那么您必须将其放在 then 中，或者像 Michael P. Bazos 或 Matthew Berg 建议的那样将函数链接在一起。

【讨论】：