AngularJS-如果有新请求，请取消以前的$resource$承诺

我有一个包含两个字段的表单：用户名和密码。
当我的用户名模型更改时，我会请求API执行一些检查

当我以t毫秒间隔向工厂进行x次调用时，我想知道：

• 在我的控制器中，最后接收到的数据将与用户最后输入的数据相对应
• 以前的承诺将被取消

我试图找到一种方法来模拟API调用的延迟（因为我在本地工作，每个响应都是即时的），但我只能找到服务的示例

下面是一个jsFiddle来公开这个案例：

HTML 谢谢

这大概是您取消以前请求的方式

但是，请记住，即使在建立连接时取消了请求，它也将由服务器执行，在这种情况下，服务器会收到大量无用的请求。这不是一个好的做法

在您的情况下，使用$timeout和0.5秒的延迟可能会减少对服务器的不必要调用。大致是这样的：

<div ng-app="myApp">
    <form ng-controller="loginCtrl">
        Username: {{ username }}
        <br>Password: {{ password }}
        <br>
        <input name="username" placeholder="enter your username" type="text" 
            ng-model="username" ng-change="checkUsername()">

        <input name="password" placeholder="enter your password" type="password" 
            ng-model="password">
    </form>
</div>

var myApp = angular.module('myApp', ['ngResource']);

/*
 * PRE-LOGIN
 *
 */
myApp.factory( 'preLogin', ['$resource',
    function( $resource, constants ) {
        // Check if a username exists     
        return $resource( '/api/prelogin', {},
                      {
                          post: {
                              method : 'POST'
                          }
                      });
    }]);


/*
 * Login Controller
 *
 *
 */
myApp.controller('loginCtrl', ['$scope', 'preLogin',
    function( $scope, preLogin ) {
        $scope.username = '';
        $scope.password = '';

        // Do some check on the username...
        $scope.checkUsername = function() {
            console.log('prelogin... ', $scope.username);

            preLogin.post({
                username: $scope.username
            }).$promise.then( function( data ) { // Success
                console.log(data);

            }, function( error ) { // Error
                console.log(error);

            });
        }
    }]);

myApp.factory( 'preLogin', ['$resource','$q',
function( $resource, $q ) {
    var canceler = $q.defer();

    var cancel = function() {
        canceler.resolve();
        canceler = $q.defer();
    };

    // Check if a username exists     
    // create a resource
    // (we have to re-craete it every time because this is the only
    // way to renew the promise)    
    var initRes = function() {
    cancel();    
    return $resource( '/api/prelogin', {},
                  {
                      post: {
                          method : 'POST',
                          timeout : canceler.promise
                      }
                  });
    };

    return {
        initRes: initRes,
        cancelRes: cancel
    };    
}]);

myApp.controller('loginCtrl', ['$scope', 'preLogin','$timeout',
function( $scope, preLogin,$timeout ) {
    var timer = false;
    $scope.username = '';
    $scope.password = '';

    // Do some check on the username...
    $scope.checkUsername = function() {
        console.log('prelogin... ', $scope.username);
        if (timer) {
            $timeout.cancel(timer);
        }
        timer = $timeout(function() {
                preLogin.initRes().post({
                username: $scope.username
            }).$promise.then( function( data ) { // Success
                console.log(data);

            }, function( error ) { // Error
                console.log(error);

            });
        }, 500);

    }
}]);