从 $http GET 服务返回函数值答案

【问题标题】：Return function value from $http GET service从 $http GET 服务返回函数值
【发布时间】：2018-01-10 03:38:48
【问题描述】：

一旦 onClick 被触发，我试图从函数中返回一个数组。我在控制台中看到数组中包含的值。但我没有看到 HTML 页面上显示的值。

控制器：

$scope.chosenFilm = []; //The array where values are stored

  //onClick function
  $scope.insertFilm = function () {  
     console.log("Film saved in watch list!");
     getSelectedFilm(); //Call function
}

function getSelectedFilm() {
  return $http.get('/watch-list').then(function(response) {
      $scope.chosenFilm = response.data;     
      $log.info($scope.chosenFilm[0]); // Values displayed in console!
        return $scope.chosenFilm; 
      });
}

显示值的 HTML 页面：

<div class="container">
        <table class="table">
          <thead>
            <tr>
              <th>Film</th>
              <th>Poster</th>
              <th>Overview</th>
              <th>Genres</th>
              <th>Release</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="film in chosenFilm">
              <td>{{film.title}}</td>
              <td><img ng-src="{{film.poster}}"></td>
              <td>{{film.overview}}</td>
              <td>{{film.genres}}</td>
              <td>{{film.release |  date:  "dd.MM.y" : UTC+00:00 }}</td>
            </tr>
          </tbody>
        </table>
</div>

【问题讨论】：

你是在告诉 html 使用哪个控制器吗？
尝试在http 服务之前删除return。而且你也不需要返回数组。刚好够$scope.chosenFilm = response.data;
@Hadi，但在这种情况下这不是问题。它不应该干扰元素的渲染
嗨 @DanielD 是的，我是。
如果能给我们提供Minimal, Complete, and Verifiable example就很好了

标签： javascript angularjs http-get angularjs-http

【解决方案1】：

这个方法返回promise值并且是异步的。因为你必须使用带有回调函数的 htpp.get 方法。

因此，关于您的代码，您可以使用 as

function getSelectedFilm() {
  $http.get('/watch-list').then(function(response) {
      $scope.chosenFilm = response.data;     
      $log.info($scope.chosenFilm[0]); // Values displayed in console!
        $scope.chosenFilm; 
      })
 .then (() => { 
console.log($scope.chosenFile);
......something else...; // you can see the  data 
});

【讨论】：

由于异步方法，它不能按顺序工作。如果您想要一些连续的结果，您可以使用 .then ( (result) => { ..something else...} ) 来使用承诺值。然后 () ....
console.log($scope.chosenFile);似乎在控制台中返回 undefined。
有一个官方信息可以找docs.angularjs.org/api/ng/service/$http

【解决方案2】：

调用HTTP GET的getSelectedFilm()不被执行

它在insertFilm() 内部永远不会被调用

【讨论】：

getSelectedFilm() 仍由 insertFilm() 调用。我对其进行了测试，并得到了显示在控制台中但不在页面上的值。 insertFilm() 是 onClick 函数。

【解决方案3】：

试试这个

$scope.chosenFilm = []; //The array where values are stored

 //onClick function
 $scope.insertFilm = function () {  
 console.log("Film saved in watch list!");
 $http.get('/watch-list')
 .then(function(response) {
      $scope.chosenFilm = response.data;     
      $log.info($scope.chosenFilm[0]); // Values displayed in console!
  });
}

【讨论】：

【解决方案4】：

我建议使用作为控制器语法。原因是角度不能正确反映 $scope 数组引用更改到视图，因为它会为 ng-repeat 生成新范围，即当您更改 $scope.chosenFilm ng-repeat 的引用时到时候会看旧的。更多详情： ng-repeat not updating on update of array。您的问题与该问题完全相同，因为您在一段时间（承诺解决时间）后使用 response.data 更改了 selectedFilm 参考。如果你不喜欢控制器作为语法，你可以快速使用这个：

angular.extend($scope.chosenFilm, response.data);

【讨论】：