AngularJS：为什么 .then() 不等待承诺对象到达

Question

为了进行 API 调用，我创建了以下 Angular 服务。

(function (module) {
    module.service('APIService',function ($http, $q) {
        console.log("Reached APIService")
        var deferred = $q.defer();
        this.getData = function (requestURL) {
            console.log("Reached APIService @GET", requestURL);
            $http.get(requestURL).success(
                function (data, status) {
                    deferred.resolve(data);
                    console.log("In service",status,data);
                }).error(
                function (data, status) {
                    deferred.reject(data);
                    console.log(status);
                });
            return deferred.promise;
        };

        this.postData = function (requestURL, requestObj) {
            console.log("Reached APIService @POST", requestURL, requestObj);
            $http.post(requestURL, requestObj).success(
                function (data, status) {
                    deferred.resolve(data);
                    console.log(status);
                }).error(
                function (data, status) {
                    deferred.reject(data);
                    console.log(status);
                });
            return deferred.promise;
        };
    });
}(angular.module("MainApp")));

我已将它注入我的两个控制器中。但是，我面临以下问题：

1. 当我第一次在第一个控制器中调用它时，它可以正常工作并返回所需的结果。但是，当我在第二个控制器中按如下方式调用它时：

       APIService.getData(Config + headerURL).then(function (response) {
           console.log(Config + headerURL);
           console.log("header response from API", response);
   
       },function(error) {
           console.log("API call for header data failed");
       });
   

由于我的服务返回一个承诺对象，我不希望 .then() 中的代码在服务数据到达之前工作。 但是，它在服务数据到达之前运行（不知道如何）。最奇怪的是，我在 .then() 中得到的响应实际上并不是来自这个 URL（Config+headerURL）的响应，而是从之前在第一个控制器中调用的不同 URL 获得的响应。 APIService 服务。

只是为了通知：来自当前 URL 的实际响应确实会在稍后阶段到达。

我知道异步调用，我认为在这种情况下它有一些事情要做，但我猜 .then() 在 Angular 中处理它。所以我很困惑这里有什么问题。有没有人能解释一下？

Answer 1

当$http 已经返回一个承诺时，您通过创建自己的承诺来使用反模式。

在此服务中完全摆脱 $q 并简单地返回 $http

this.getData = function (requestURL) {
    console.log("Reached APIService @GET", requestURL);
    return $http.get(requestURL).then(function (response) {
        return response.data;
        console.log("In service", status, data);
    }, function () {
        // errror handling here
    });

};

Answer 2

由于服务是单例的，因此您只有一个延迟对象的实例。

一旦解决，就会一直被解决，所以下次调用getData，它会立即返回。

你可以移动：

var deferred = $q.defer();

在您的 getData 和 postData 函数中。

或者你可以只返回 $http 创建的承诺。

Answer 3

试试这个，你需要return到http结果。

this.getData = function (requestURL) {
            console.log("Reached APIService @GET", requestURL);
           return $http.get(requestURL) };

Answer 4

看来您必须在 $http 调用中明确禁用缓存。

$http.get({
  url: requestURL,
  cache: false
})