排队异步操作

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）链接promises（$ http返回的内容）。

因此，在您的情况下，链接getToken和注册的正确方法是：

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

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

修改（进一步说明）

您尝试做的是 promise chaining 。实际上，按顺序执行两个或多个异步操作。来自html5rocks promise tutorial：

排队异步操作

您也可以链接“然后”按顺序运行异步操作。

当你从“then”回调中返回一些东西时，它有点神奇。如果返回一个值，则使用该值调用下一个“then”。但是，如果你返回类似promise的东西，那么下一个“then”就会等待它，并且只有在该承诺解决时才会被调用（成功/失败）。

这种方式的工作方式是，当您从Promise或.then()函数返回一个值时，将使用{{1}的返回值调用链中的下一个函数}函数或.then()的分辨率，如果返回值为Promise，则链条会在此Promise上等待，然后再继续解析。

因此（并记住比$ http返回一个Promise对象）：

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; }); }的结果调用b()，只需执行以下操作：

a()

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

PS：在您的具体情况下，代码为：

a().then(b)

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请求？

代码

2 个答案:

排队异步操作