从嵌套的 http.put 返回值

Question

如何将 http.put 的响应对象作为 TestFunction 的返回值返回给控制器？ http.get 的响应打印正常，但 putResponse 未定义。在调试期间，我可以看到 http.put 在服务器上更新数据。

  testFunction: function (url, data) {
        var etag;
        var putResponse;
        $http.get(url).then(function successCallback(response) {
            if (response.data != null) {
                etag = response.headers(['etag']);
                 $http.put(url, data, { headers: { 'If-Match': etag } }).then(function successCallback(response) {
                     putResponse = response;
                }, function errorCallback(response) {
                    // handle error
                });
            }
            else {
                // handle error

            }

        }, function errorCallback(response) {
            // handle error

        });
        console.log(putResponse);

    }

Answer 1

$http.get 和 $http.put 与其余代码异步执行。 您在异步调用中拥有 console.log。所以它在返回之前被调用。

此外，如果您希望将 putResponse 返回给“调用者”，您必须同时返回 putResponse 和承诺：

  testFunction: function (url, data) {
        var etag;
        var putResponse;
        var promise = $http.get(url).then(function successCallback(response) {
            if (response.data != null) {
                etag = response.headers(['etag']);
                return $http.put(url, data, { headers: { 'If-Match': etag } })
            }
            else {
                // handle error
                // $q.reject();    
            }

        }).then(function successCallback(response) {
            putResponse = response;
            console.log(putResponse); // this gets called after the server responds ( defined ) 
            return putResponse;
        })
        ["catch"](function (response) {
                 // handle error
        });

        console.log(putResponse); // this gets called before the server responds ( undefined )
        return promise;
    }

现在你可以使用

tesFunction(arg1, arg2).then(function(response){ /* in here you have response defined */ })

Answer 2

一种方法是使用$q.all() 返回多个承诺。

工作 JSFiddle：https://jsfiddle.net/sscovil/waxL8Lt8/

在该示例中，我使用 $httpProvider 拦截器来模拟 HTTP 响应；这与您的需要无关，仅用于说明。

重要的是myRestService函数：

function myRestServiceFactory($http, $q) {
  return function() {
    var deferredGet = $q.defer();
    var deferredPut = $q.defer();
    var promises = {};

    promises.get = deferredGet.promise;
    promises.put = deferredPut.promise;
    $http.get('https://example.com').then(onGetSuccess, onGetError);

    return $q.all(promises);

    function onGetSuccess(response) {
      if (response.data != null) {
        var etag = response.headers(['etag']);
        var config = {
          headers: {'If-Match': etag}
        };
        $http.put('https://example.com', {}, config)
          .then(onPutSuccess, onPutError);
        deferredGet.resolve(response);
      } else {
        deferredGet.reject(response);
      }
    }

    function onGetError(error) {
      deferredGet.reject(error);
    }

    function onPutSuccess(response) {
      deferredPut.resolve(response);
    }

    function onPutError(error) {
      deferredPut.reject(error);
    }
  }
}

注意它使用$q.defer() 创建两个promise，然后返回$q.all(promises)。这将返回一个单一的承诺，您可以通过.then() 将回调附加到该承诺，并且回调将接收到承诺响应的映射，如下所示：

function MyController($scope, myRestService) {
    $scope.values = {};
    myRestService().then(function (values) {
      $scope.values.get = JSON.stringify(values.get);
      $scope.values.put = JSON.stringify(values.put);
  });
}