取消正在进行的角$ HTTP请求时，有一个新的请求 [英] Cancelling ongoing Angular $http requests when there's a new request

问题描述

当有一个新的请求，怎样才能取消正在进行的角$的http请求？

我有与生活的更新在用户键入一个视图的角度应用。有时，旧的请求的最新要求后完成，这意味着视图显示错误的数据。什么是取消了previous请求最直接的方法时，有一个新的？

采用了棱角分明1.5时，它的价值。

 ＆LT;输入NG模型=查询NG-KEYUP =搜索（）/＆GT;
{{结果| JSON}}//在控制器：
    $ scope.search =功能（）{
        $ HTTP（{
            方法：GET，
            网址：/endpoint.php
            params：一个{
                查询：$ scope.query
            }
        }）。然后（功能（响应）{
            $ scope.results = response.data;
        }）
    }
 

一个解决方法我都试过：

  //在控制器：
    变种消除= $ q.resolve（）; //新
    $ scope.search =功能（）{
        canceler.resolve（取消旧的请求）; //新
        $ HTTP（{
            方法：GET，
            网址：/endpoint.php
            params：一个{
                查询：$ scope.query
            }，
            超时：// canceler.promise新
        }）。然后（功能（响应）{
            $ scope.results = response.data;
        }）
    }
 

在这种情况下，即使我调用$ HTTP请求之前canceler.resolve，请求变成为失败。

任何见解？

编辑：找到解决方案

  //在控制器：
    变种消除= $ q.defer（）;    $ scope.search =功能（）{
        canceler.resolve（取消）; //解决了previous消除
        消除= $ q.defer（）; //重要提示：创建一个新的消除！
                                      提出将失败//否则所有$ http请求
        $ HTTP（{
            方法：GET，
            网址：/endpoint.php
            params：一个{
                查询：$ scope.query
            }
        }）。然后（功能（响应）{
            $ scope.results = response.data;
        }）
    }
 

解决方案

当你开始新的搜索，调用取消（）功能。你可以使用解析变量，以确保它开始之前你不要放弃你的 $ HTTP 电话。事情是这样的：

  VAR消除= $ q.defer（）;
VAR解决= FALSE;VAR取消=功能（）{
    canceler.resolve（HTTP调用中止）;
};$ scope.search =功能（）{
    如果（解决）{
        取消（）;
    }    消除= $ q.defer（）;
    解决= TRUE;    $ HTTP（{
        方法：GET，
        网址：/endpoint.php
        params：一个{
            查询：$ scope.query
        }
        超时：canceler.promise
    }）。然后（功能（响应）{
        $ scope.results = response.data;
        解决= FALSE;
    }）
}
 

不要忘了在你的控制器/指令/服务注入 $ Q 。

How does one cancel an ongoing Angular $http request when there's a new request?

I've got an Angular app with a view that updates live as the user types. Sometimes old requests complete after the latest request, meaning the view displays the wrong data. What's the most straightforward way to cancel the previous request when there's a new one?

Using Angular 1.5, for what it's worth.

<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;
        })
    }

One solution I have tried:

// In the controller:
    var canceler = $q.resolve();    // New
    $scope.search = function(){
        canceler.resolve("Canceling old request");     // New
        $http({
            method: "GET",
            url: "/endpoint.php"
            params: {
                query: $scope.query
            },
            timeout: canceler.promise    // New
        }).then(function(response){
            $scope.results = response.data;
        })
    }

In this scenario, even though I'm calling canceler.resolve before the $http request, the request turns up as "failed".

Any insights?

edit: Solution found!

// 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;
        })
    }

解决方案

When you start a new search, call the cancel() function. And you can use a resolved variable to make sure that you do not abort your $http call before it starts. Something like this:

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;
    })
}

Don't forget to inject $q in your controller/directive/service.

这篇关于取消正在进行的角$ HTTP请求时，有一个新的请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！