Javascript 如果存在'；这是一个新的要求

当有新的请求时，如何取消正在进行的$http请求

我有一个Angular应用程序，它的视图可以随着用户的输入实时更新。有时，旧请求在最新请求之后完成，这意味着视图显示错误的数据。当有新的请求时，取消上一个请求最直接的方法是什么

使用Angular 1.5，尽其所能

<input ng-model = "query" ng-keyup = "search()"/>
{{results | json}}

// In the controller:
    $scope.search = function(){
        $http({
            method: "GET",
            url: "/endpoint.php"
            params: {
                query: $scope.query
            }
        }).then(function(response){
            $scope.results = response.data;
        })
    }

在这个场景中，即使我在$http请求之前调用canceler.resolve，请求仍然显示为“失败”

有什么见解吗

编辑：找到解决方案

// In the controller:
    var canceler = $q.defer();

    $scope.search = function(){
        canceler.resolve("cancelled"); // Resolve the previous canceler
        canceler = $q.defer();        // Important: Create a new canceler! 
                                      // Otherwise all $http requests made will fail
        $http({
            method: "GET",
            url: "/endpoint.php"
            params: {
                query: $scope.query
            }
        }).then(function(response){
            $scope.results = response.data;
        })
    }

---

启动新搜索时，调用

cancel（）

函数。您可以使用

已解析

变量来确保在

$http

调用开始之前不会中止调用。大概是这样的：

var canceler = $q.defer();
var resolved = false;

var cancel = function() {
    canceler.resolve("http call aborted");
};

$scope.search = function() {
    if (resolved) {
        cancel();
    }

    canceler = $q.defer();
    resolved = true;

    $http({
        method: "GET",
        url: "/endpoint.php"
        params: {
            query: $scope.query
        }
        timeout: canceler.promise
    }).then(function(response) {
        $scope.results = response.data;
        resolved = false;
    })
}

---

不要忘记在控制器/指令/服务中注入

$q

。

解决方案是设置承诺，然后在每次搜索（）时取消它并重新初始化一个新的承诺。这将可靠地取消以前的任何$http（）：

---

嗯-我尝试了这个-

ng click=“cancel（）；search（）；”

但我仍然在控制台中得到相同的XHR失败。我也在注入$q。@schnaus您是使用var canceler=$q.resolve（）还是var canceler=$q.defer（）<代码>变量取消器=$q.defer（）。我被难住了。根据你的代码，在你进行http调用之前，取消器已经解决了。我找到了解决方案：我必须为每个搜索请求创建一个新的取消器，否则它总是会失败。

var canceler = $q.defer();
var resolved = false;

var cancel = function() {
    canceler.resolve("http call aborted");
};

$scope.search = function() {
    if (resolved) {
        cancel();
    }

    canceler = $q.defer();
    resolved = true;

    $http({
        method: "GET",
        url: "/endpoint.php"
        params: {
            query: $scope.query
        }
        timeout: canceler.promise
    }).then(function(response) {
        $scope.results = response.data;
        resolved = false;
    })
}

var canceler = $q.defer();

$scope.search = function() {

    canceler.resolve();

    canceler = $q.defer();

    $http({
        method: "GET",
        url: "/endpoint.php"
        params: {
            query: $scope.query
        }
        timeout: canceler.promise
    }).then(function(response) {
        $scope.results = response.data;
    })
}