如何在Angularjs中“将变量从$http成功传递到另一个$http请求”？答案

【问题标题】：How to "pass variable from $http success to another $http request" in Angularjs?如何在Angularjs中“将变量从$http成功传递到另一个$http请求”？
【发布时间】：2019-11-03 03:45:21
【问题描述】：

我无法从我的第一个 http get 请求访问输出变量，我需要此数据用于另一个 http Post 请求。

无。

$scope.submit = function(x) {

  $http({
    method: "GET",
    url: url + 'getOSchild',
    params: { ncard: x }
  }).then(function success(response) {
    $scope.osChild = response.data;
    console.log($scope.osChild) // this has an output
  }, function error(response, status) {
    console.log(response)
    console.log(status)
  });


  $http({
    method: "POST",
    url: url + 'printOS',
    data: JSON.stringify({
      CARD_NAME: data_cname,
      C_DATE: data_date,
      C_NUMATCARD: data_ncard,
      C_DISTMEANS: data_means,
      C_TIME: data_time,
      cData: $scope.osChild //this is null
    }),
    header: {
      'Content-Type': 'application/json'
    },
  }).then(function success(response) {
    console.log(response)
  }, function error(response, status) {});

}

我需要 $scope.osChild 出现在我的 http post 请求中。

【问题讨论】：

标签： angularjs angular-promise angularjs-http

【解决方案1】：

第一个 GET 调用是异步的，所以 $scope.osChild 最初设置为 null。所以建议使用Promiseshttps://ng2.codecraft.tv/es6-typescript/promises/

$scope.getOSChild = function() {
  var deferred = $q.defer();
  $http.get(url + 'getOSchild')
    .then(function onSuccess(response) {
      $scope.osChild = response.data;
      deferred.resolve(response.data);
  }).catch(function onError(response) {
      console.log(response.data);
      console.log(response.status);
      deferred.reject(response.status);
    });
  return deferred.promise;
};

$scope.submit = function(x) {

  $scope.getOSChild().then(function (osChild) {
    $http({
      method: "POST",
      url: url + 'printOS',
      data: JSON.stringify({
        CARD_NAME: data_cname,
        C_DATE: data_date,
        C_NUMATCARD: data_ncard,
        C_DISTMEANS: data_means,
        C_TIME: data_time,
        cData: osChild
      }),
      header: {
        'Content-Type': 'application/json'
      },
    }).then(function onSuccess(response) {
      console.log(response);
    }, function onError(response, status) {});

  });

};

【讨论】：

避免使用deferred anti-pattern。 .success 方法有 been removed from the AngularJS framework。

【解决方案2】：

简单地将两个 XHR 链接起来：

function getOSChild (x) {
    return $http({
        method: "GET",
        url: url+'getOSchild',
        params: {ncard: x}
    }).then(function success(response) {
        $scope.osChild = response.data;
        console.log($scope.osChild); // this has an output
        return response.data;
     },function error(response) {
        console.log(response)
        console.log(response.status);
        throw response;
    });
}

$scope.submit = function(x) {  
    getOSChild(x).then(function(osChild) {
        $http({
            method: "POST",
            url: url+'printOS',
            data:{ CARD_NAME: data_cname, 
                      C_DATE: data_date,
                 C_NUMATCARD: data_ncard, 
                 C_DISTMEANS: data_means,
                      C_TIME: data_time, 
                       cData: osChild //chained

            }
        }).then(function success(response) {
              console.log(response)
        });
    });
};

.then 方法返回一个 新的承诺，它通过 successCallback、errorCallback 的返回值解决或拒绝（除非该值是一个承诺，在这种情况下它是使用 promise chaining 在该承诺中解析的值解析。

有关详细信息，请参阅

【讨论】：