取消请求AngularJS

时间:2016-03-13 19:23:53

标签: angularjs api request response laravel-5.2

我想知道是否可以管理以下场景:

我使用Laravel作为API,使用AngularJS作为前端。我有一个功能,允许用户搜索客户列表。但是我遇到了一个问题,因为当用户输入客户名称的每个字母时,我正在向Laravel(API)发送请求,但有时最后一个请求的响应速度比第一个请求快。

因此,显示给用户的最终结果是第一个请求的响应,这是不好的,因为用户已经完成输入整个客户名称。

我的目标是:

  1. 如果用户键入第一个字母,请向API发送请求。

  2. 如果用户键入第二个字母,请检查是否未收到上一个回复,然后取消上一个请求并发送新请求。

  3. 如果用户输入第三个字母,请检查是否收到第二个请求的响应,然后发送请求,如果未收到上一个请求,则取消之前的请求并发送新请求。
  4. 我不确定我的例子是否清楚,但之前在许多网站上都看到了类似的行为。

    如果发现这个:Cancelling $http request但看起来这是一种不好的做法。

    我该怎么做?任何线索都将非常感激。提前谢谢!

1 个答案:

答案 0 :(得分:1)

通过在API调用开始之前将布尔变量设置为true,并在响应时将其设置为false,可以非常轻松地满足您的要求。然后,您可以使用此变量来检查请求是否已在进行中。

但是,我认为你想要的实际上与你描述的有些不同。在发送请求之前等待用户停止输入更有意义。在Angular中,您可以使用去抖设置轻松完成此操作:

<input ng-model="params.q" ng-change="doApiCall()" ng-model-options="{ debounce: 500 }" type="text">

编辑:我现在看到你的要求有点不同了。您想要取消正在运行的请求。可能有办法取消运行ajax调用,但你肯定无法保证。应该做的是创建一个队列,以便新请求在最后一个完成后立即开始。