javascript - 取消先前由ng-change创建的api请求

我有一个连接到角度控制器中的功能的搜索框，以调用网络服务以获取人员列表：

        <div class="input-group">
            <div class="input-group-addon">Find Person</div>
            <input type="text" class="form-control" placeholder="Search" ng-change="vm.getPeople()" ng-model="vm.searchTxt" ng-model-options="{debounce: 500}"/>
        </div>

它具有防抖功能，不会触发过多的呼叫。

该函数如下所示：

    function getPeople() {

        vm.spinner = true;

        peopleClient
            .get({
                GenSearchTerm: vm.searchTxt
            })
            .success(function (data) {
                vm.spinner = false;
                vm.searchResult = data.results;
            })
            .error(function (err) {
                vm.spinner = false;
                log.debug(err);
                err;
            });
    }

这按预期工作，但有问题。如果我输入一个非常宽松的术语返回许多结果，则返回一个非常具体的术语，例如返回1个结果（即“ a”然后是“ Angela Smith”），则该数据将首先针对该特定术语返回，然后在替换时回调是按一般术语执行的（首先执行，但在服务器端花费的时间更长。是的，服务器端调用太慢，我将在此处进行修复，但我也想更好地在客户端进行处理。

因此，如果我知道以后的调用会取代它们，该如何停止/取消此函数创建的任何进行中的请求？

编辑：

太好了，这使我很满意，并且有使用超时的良好示例。想看看是否有人可以告诉我这个简单的加法是否有问题。它可以正常工作，但不能确定我能否很好地解决诺言。

function getPeople() {

    vm.spinner = true;


    //check for existing
    if (vm.searchPromise) {
        //cancel the existing call
        vm.searchPromise.resolve();
    }
    vm.searchPromise = $q.defer();

    peopleClient
        .get({
            GenSearchTerm: vm.searchTxt
        }, vm.searchPromise)
        .success(function (data) {
            vm.spinner = false;
            vm.searchResult = data.results;
        })
        .error(function (err) {
            vm.spinner = false;
            log.debug(err);
            err;
        });

}

然后在peopleClient中：

    function get(params, deferred) {
        return $http.get(url + 'people', {
            headers: {
                Authorization: 'Bearer ' + access_token
            },
            params: params,
            timeout: deferred.promise
        });
    }

最佳答案

如果您使用的是矩形，则可以使用timeout : requestCancelDeferred：

var requestCancelDeferred = $q.defer();

然后，当您需要取消请求时：

requestCancelDeferred.resolve();

和您的查询：

return Restangular
    .one('homes')
    .withHttpConfig({ timeout : requestCancelDeferred.promise })
    .get(/*your query here*/);

或使用$ http（1.1.5及更高版本）：

var requestCancelDeferred = $q.defer();
$http.get('/someUrl', {timeout: requestCancelDeferred.promise}).success(successCallback);

当您需要取消时：

requestCancelDeferred.resolve();