AngularJS $http 结果与承诺

Question

我是 angular $q 服务的新手。我正在使用 $http 和 angular $q 服务来实现异步请求。下面是我的代码，我无法获得后端 api 的结果。 (json)

Services.js：

.service('httpService', function($q, $http, $timeout) {

 var asyncRequest = function(url) {
    return $http.get(url)
        .then(function(response) {
            //res is the index of an array in php, which will be encoded.
            return response.res;

        }, function(response) {
            // something went wrong
            return $q.reject(response.res);
        });
 };
 return {
   asyncRequest : asyncRequest 
 };

});

Controller.js：

var result = httpService.test(url)
.then(function(data) {
    // Line below gives me "undefined"
    console.log(data);
}, function(error) {
    alert("Error...!");
});

提到的行，给我未定义。 （当然，我可以在main函数中写console.log(data)，但这不是一个好习惯，因为我想将result返回给controller）

关于我的$q服务的实现，有没有更简单的方法？

任何想法将不胜感激。

Answer 1

您应该不在这种情况下使用$q，因为$http 已经返回了一个承诺。将 2 一起使用效率低下。 （$q 在您使用非角度异步函数时很有用，例如 Geo 查找）。

Services.js：

.service('httpService', function($http, $timeout) {

  var asyncRequest = function(url) {
    return $http.get(url)
  };
  return {
   asyncRequest : asyncRequest 
  };

});

Controller.js：

var result = httpService.asyncRequest(url)
.then(function(res) {
    console.log(res.data);
}, function(error) {
    alert("Error...!");
});

Answer 2

第一件事是您使用的是工厂风格而不是服务。 service 只是一个函数，其中方法在this 参考上定义。

我认为你不需要在服务中使用.then 只需返回 $http 返回的承诺

app.service('httpService', function($q, $http, $timeout) {

  this.asyncRequest = function(url) {
    return $http.get(url);
  };
});

在控制器中

 var result = httpService.test(url)
  .then(function(res) {
    // Line below gives me "undefined"
    console.log(res.data);
  }, function(error) {
    alert("Error...!");
  });

Answer 3

我认为您在服务中使用了 at factory 的语法。

.service('httpService', function($q, $http, $timeout) {
   this.asyncRequest = function(url) {};
});

或

.factory('httpService', function($q, $http, $timeout) {
   return {asyncRequest: function(url) {}};
});

Answer 4

响应已在上述行中被拒绝。你不需要拒绝其他任何事情。所以你不需要$q。

首先你已经返回了一个承诺。您可以在控制器中通过添加 $http 承诺的 success() 和 error() 代表来处理它。 其次，这是异步操作。而且您无法从成功回调中返回响应，例如jQuery.ajax()。这不是同步调用，这是异步调用，您必须使用回调。你的错误就在这里。当响应将被解决或拒绝时，只需返回承诺并在控制器中处理它。

所以你的控制器代码可以是这样的：

httpService.asyncRequest({
    ...
}).success(function(successfulResponse) {
    ...
}).error(function(failedResponse) {
    ...
});

Answer 5

.service('httpService', function($q, $http, $timeout) {

 var asyncRequest = function(url) {
   var defer = $q.defer();
    return $http.get(url)
        .then(function(response) {
            //res is the index of an array in php, which will be encoded.
            defer.resolve(response);

        }, function(response) {
            // something went wrong
            defer.reject(response.res);
        });
     return defer.promise;
 };
 return {
   asyncRequest : asyncRequest 
 };

});

你应该像这样从你的对象中返回承诺