是否可以在另一个请求中包含一个 Angular js $http 请求？

Question

我正在尝试在 AngularJS 中发送请求以获取用于用户注册的令牌。获得令牌后，我将使用令牌发送另一个请求来注册用户。

然而，第一个请求有效并且我获得了令牌，但第二个请求无效。

代码

facebookExample.controller('registerController', function($scope, $http, $localStorage, $location) {
  $scope.data = {};
  $scope.getToken = function() {
      $http.post('http://you-serve.org/api.php?action=createaccount&format=json&name=' + $scope.data.username + '&email=' + $scope.data.email + '&realname=' +
        $scope.data.firstname + ' ' + $scope.data.lastname +
        '&mailpassword=false&reason=Fun_and_profit&language=en&token').then(
        function(response) {
          return response.data.createaccount.token;
        }
        // End success
        ,
        function() {
          alert('error');
        } // End error 
      ); //End then
    } // End getToken

  $scope.register = function(myToken) {
      $http.post('http://you-serve.org/api.php?    action=createaccount&format=json&name=' +
        $scope.data.username + '&email=' +
        $scope.data.email + '&realname=' +
        $scope.data.firstname + ' ' +
        $scope.data.lastname +
        '&mailpassword=false&reason=Fun_and_profit&language=en&token=' + myToken).then(
        function(response) {
          alert("Registration successful !  You can log in now " + response.data.createaccount.username);
        },
        function(response) {
          alert(response.data.error.info);
        }); //End then
    } //End register


  $scope.signup = function() {
      register(getToken);
    } // End sign up
}); // End controller

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<ion-view ng-controller="registerController" title="Sign Up" view-title="Sign Up" name="login-view">

  <ion-content class="padding">
    <div class="list list-inset">
      <label class="item item-input">
        <input type="text" placeholder="Username" ng-model="data.username">
      </label>
      <label class="item item-input">
        <input type="password" placeholder="Password" ng-model="data.password">
      </label>


      <label class="item item-input">
        <input type="text" placeholder="Email" ng-model="data.email">
      </label>


      <label class="item item-input">
        <input type="text" placeholder="First Name" ng-model="data.firstname">
      </label>

      <label class="item item-input">
        <input type="text" placeholder="Last Name" ng-model="data.lastname">
      </label>



      <label class="item item-input">
        <input type="text" placeholder="City" ng-model="data.city">
      </label>




      <label class="item item-input">
        <input type="text" placeholder="Country" ng-model="data.country">
      </label>
    </div>
    <button class="button button-block button-calm" ng-click="register(getToken())">Sign Up</button>
  </ion-content>
</ion-view>

有人知道我该怎么做吗？

Answer 1

您可以使用 promise1.then(promise2).

链接承诺（这是 $http returns 的内容）

所以在你的情况下，链接 getToken 和注册的正确方法是：

$scope.getToken().then($scope.register)

（将两个函数修改为 return $http 调用后）

编辑：（进一步解释）

您尝试做的事情叫做承诺链。本质上，按顺序执行两个或多个异步操作。来自 html5rocks promise tutorial:

Queuing asynchronous actions

You can also chain "then"s to run async actions in sequence.

When you return something from a "then" callback, it's a bit magic. If you return a value, the next "then" is called with that value. However, if you return something promise-like, the next "then" waits on it, and is only called when that promise settles (succeeds/fails).

工作方式是，当您 return 来自 Promise 或 .then() 函数的值时，链中的下一个 then 函数将使用 [= .then() 函数的 56=] 值或 Promise 的分辨率，如果 return 值是 Promise，则链会等待此 Promise 在继续之前解决。

因此（记住 $http return 是一个 Promise 对象）：

function a() {
    return $http.get('...').then(function (response) { return response.data; });
}

function b(data) {
    return $http.get('...'+data).then(function (response) { return response.data; });
}

要将两个函数链接在一起，以便使用 a() 的结果调用 b()，只需执行以下操作：

a().then(b)

请阅读 the tutorial on Promises 以更好地了解它们的工作原理。它们是 JavaScript 使异步操作更易于处理的最佳工具之一。

PS：在您的特定情况下，代码为：

facebookExample.controller('registerController', function($scope, $http, $localStorage, $location) {
  $scope.data = {};

  function getToken() {
    return $http.post('http://you-serve.org/api.php?action=createaccount&format=json&name=' + $scope.data.username + '&email=' + $scope.data.email + '&realname=' + $scope.data.firstname + ' ' + $scope.data.lastname + '&mailpassword=false&reason=Fun_and_profit&language=en&token')
      .then(
        function(response) {
          return response.data.createaccount.token;
        },
        // End success
        function() {
          alert('error');
        } // End error 
      ); //End then
  } // End getToken

  function register(myToken) {
    return $http.post('http://you-serve.org/api.php?action=createaccount&format=json&name=' +
        $scope.data.username + '&email=' +
        $scope.data.email + '&realname=' +
        $scope.data.firstname + ' ' +
        $scope.data.lastname +
        '&mailpassword=false&reason=Fun_and_profit&language=en&token=' + myToken)
      .then(
        function(response) {
          alert("Registration successful !  You can log in now " + response.data.createaccount.username);
        },
        function(response) {
          alert(response.data.error.info);
        }
      ); //End then
  } //End register


  $scope.signup = function() {
    getToken().then(register);
  } // End sign up
}); // End controller

Answer 2

您可以通过两种方式完成：

方法 1 - 正常方式：

$scope.getToken = function() { 
    $http.post().then(function success(response) {
         // call register method here
         $scope.register(response.data.createaccount.token);
    }, function error(reason) {
      // do something
    });
};

方法 2 - 使用 $watch:

$scope.token = null;

 $scope.getToken = function() { 
        $http.post().then(function success(response) {
             // set the token value here
             $scope.token = response.data.createaccount.token;
        }, function error(reason) {
          // do something
        });
    };

$scope.$watch(function () { return $scope.token;}, 
function (newVal, oldVal) { 

if (newVal !== oldVal) {
   $scope.register(newVal);
}

});

是否可以在另一个请求中包含一个 Angular js $http 请求？

Is it possible to have an Angular js $http request inside another request?

html

javascript

http

angularjs

angularjs-http

代码

Queuing asynchronous actions