Question

我使用$ http post对Angularjs（v1.2.14）有问题，ajax调用的返回值在视图中不一致。这意味着代码实际上有效，但有时当我重新加载页面时（Ctrl + F5），数据不会显示（就像一个空的obj），但是当我尝试重新加载页面时，数据会显示或不显示（比如50-50％的几率）

这是我的一些代码：

myGuitarApp.service('songService', ['$http','$q', function( $http, $q ){

this.list = function(){

    return $http
    .post("getSongs.php") // return all songs from my DB in json
    .success( function( data ){
        console.log("1: ajax done");
        })
    .error( function(){
        console.log("error");
        });
}
}])

myGuitarApp.controller('returnAllSongs', function( $scope, $http, songService){

songService.list().then(
    function( data ){
        console.log( data );
        $scope.songs = data.data;
    }, function( data ){
        console.log("not success");
});
});

我已经阅读了一些关于在这种情况下使用$ q或延迟对象的文章，但仍然不幸运，同样的问题仍然存在。

更新1： 我尝试使用$ q方法，但返回的数据仍然随机显示（空obj或完整数据）。检查控制台日志，我发现“返回承诺”行始终出现在“ajax done”之前。这是一个问题还是什么？

this.list2 = function(){
    var defer = $q.defer();

    $http
    .post("getSongs.php")
    .success( function( data ){
        console.log("1: ajax done");
        defer.resolve(data);
        })
    .error( function(){
        console.log("error");
        defer.reject();
        });
    console.log("return promise");
    return defer.promise;
}

Answer 1

$ http服务已经返回一个promise，所以如果你的songService没有处理它们之间的数据，则不需要将它包含在另一个promise中。请记住，虽然服务器可能会发送一些带有非错误http代码的意外消息，但在这种情况下，承诺将得到满足。我将调试输出添加到控制台。检查服务器返回的内容。

myGuitarApp.service('songService', ['$http', '$q',
  function($http, $q) {

    this.list = function() {

      return $http.post("getSongs.php");

    }

  }
]);

myGuitarApp.controller('returnAllSongs', ['$scope', '$http', 'songService', function($scope, $http, songService) {

  songService.list().then(
    function(data) {
      console.log("success");
      console.log(data);
      $scope.songs = data.data;
    }, function(data) {
      console.log("not success");
      console.log(data);
    });
}]);

您可能希望保留邮件请求以执行成功检查。假设服务器有时会返回意外情况，您可以执行以下操作：

myGuitarApp.service('songService', ['$http', '$q',
  function($http, $q) {
    this.list = function() {
      var deferred = $q.defer();

      $http.post("getSongs.php").success( function(response) {
        if ( response.indexOf("loading") > -1 ) { // loading would be the unexpected response, you can turn that around and search for something known in the expected response
          deferred.reject(response);
        } else {
          deferred.resolve(response);
        }
      }).error( function(response) {
        deferred.reject(response);
      });

      return deferred.promise;
    }
  }
]);

或者你也可以在控制器中执行该测试。最合适的问题是你必须考虑的问题。

Answer 2

在成功函数中返回数据

 .success( function( data ){
    console.log("1: ajax done");
    return data;
    })

你还需要返回一个承诺

this.get = function(from, to){
        var deferred = $q.defer();
        var url = 'user/activities?from='+from+'&to='+to;
        $http.get(url).success(function(data, status) {
            // Some extra manipulation on data if you want...
            deferred.resolve(data);
        }).error(function(data, status) {
            deferred.reject(data);
        });

        return deferred.promise;
    }

所以在你的情况下会是这样的 var deferred = $ q.defer（）;

return $http
.post("getSongs.php") // return all songs from my DB in json
.success( function( data ){
    console.log("1: ajax done");
            deferred.resolve(data);
    })
.error( function(){
    console.log("error");
            deferred.reject();
    });

        return deferred.promise;
    }

Angularjs ajax回归不一致

2 个答案: