$http 时间问题，AngularJS答案

【问题标题】：$http timing issues, AngularJS$http 时间问题，AngularJS
【发布时间】：2016-12-12 06:43:48
【问题描述】：

有两个问题。我试图从 $http 响应中获取一个值并用它填充一个变量，然后应该更新几个 DOM 对象。问题是它似乎存在时间问题，其中调用 $http 服务的函数完成，然后变量得到更新，但似乎没有在任何地方更新它应该更新。我还尝试在变量上放置一个手表，它似乎只在页面最初加载时触发。我整天都在阅读这些内容，但似乎找不到有效的答案。

app.controller('MainCtrl', ['$scope', '$http', 'waciServ', function($scope,      $http, waciServ) {
"use strict";
$scope.currentSource = waciServ.activeSource;

$scope.$watch('waciServ.activeSource', function(newValue, oldValue) {
        $scope.currentSource = newValue;
        console.log('Watcher! ' + newValue);
}/*, true*/);

$scope.getActiveSource = function () {
    $scope.currentSource = waciServ.getStringByName("active_device");
};
}]);

app.service('waciServ', function($http) {
  var self = this;
  this.waciIP = location.host;
  this.activeSource = '';

  this.getStringByName = function (name) {
    $http.post("http://" + self.waciIP + "/rpc/", "method=GetVariableByName&param1=" + name + "&encoding=2")
        .then (function (response) {
            var was_error = self.read(response.data);

            if (was_error == '1') { //active_device is not set
                self.assignVariable(name, "none");
                self.activeSource = "none";
                return self.activeSource;

            } else {
                var varId = parseInt(self.read(response.data));
                $http.post("http://" + self.waciIP + "/rpc/", "method=GetVariableValue&param1=" + varId + "&encoding=2")
                    .then (function (response) {

                        self.activeSource = self.read(response.data);

                        return self.activeSource;      
                });
            }
    }, function (error) {
        console.log("error: " + error.data);
    });
  };
});

我可以在返回触发之前放置一个console.log，看看我有我想要的，但另一个console.log放在控制器内的函数中显示'未定义'。

什么给了？提前谢谢你。

【问题讨论】：

标签： javascript angularjs promise angular-promise angularjs-http

【解决方案1】：

您无需考虑使用 watcher。

基本上问题是您没有从服务方法返回承诺。您应该从您的服务方法返回对$http 方法调用的承诺。然后在方法调用上使用.then 来链接承诺并将success 和error 函数放入其中。（this answer 与您的要求有点相似，但不完全一样）

服务

self.getStringByName = function(name) {
  //returned promise from here
  return $http.post("http://" + self.waciIP + "/rpc/", "method=GetVariableByName&param1=" + name + "&encoding=2")
    .then(function(response) {
    var was_error = self.read(response.data);

    if (was_error == '1') { //active_device is not set
      self.assignVariable(name, "none");
      self.activeSource = "none";
      return self.activeSource; //returned data here to chain promise
    } else {
      var varId = parseInt(self.read(response.data));
      //returned promise from here
      return $http.post("http://" + self.waciIP + "/rpc/", "method=GetVariableValue&param1=" + varId + "&encoding=2")
        .then(function(response) {
        self.activeSource = self.read(response.data);
        //returned data from here
        return self.activeSource;
      });
    }
  }, function(error) {
    console.log("error: " + error.data);
  });
};

控制器

app.controller('MainCtrl', ['$scope', '$http', 'waciServ', function($scope,      $http, waciServ) {
"use strict";
   $scope.currentSource = waciServ.activeSource;

   $scope.getActiveSource = function () {
      waciServ.getStringByName("active_device").then(function(source){
         $scope.currentSource = source;
      });
   };
}]);

【讨论】：