javascript - Angular 中仅处理最新异步请求的响应的模式？

Question

发现了与去抖输入和处理响应有关的错误。

我有一个搜索输入，可以在您键入时查询服务器。我将其去抖设置为 300 毫秒。然而，有时会出现一些奇怪的行为:

用户输入“ab”，等待 300 毫秒，然后在第一个请求解析之前输入“c”。在搜索栏中，他们看到“abc”，但现在有两个网络请求。有时，第二个请求(“abc”)首先解析，然后第一个请求(“ab”)解析并覆盖结果列表。因此，用户会看到“ab”的结果列表，但搜索输入包含“abc”。

这本身似乎不是一个反跳的问题，而更像是寻找一种方法来丢弃“旧” promise ，以便在解决它们时可以忽略它们。

例如 - 我想要什么

• 类型“ab”
• 发送请求“ab”
• 类型“c”
• 发送请求“abc”
• “abc”返回响应，处理 Promise 解析
• “ab”返回响应，忽略 promise

Angular 中是否有针对此类事情的常见模式/方法？听起来这是一个常见问题。

例如“仅解决创建的最新 promise ”？

Answer 1

这是引入 RxJS 的完美用例，Angular 2 默认支持 RxJS。然而，在 Angular 1 中也可以使用这个库，请查看官方 rx.angular.js 库 here .

如果您包含此库，您应该能够解决您的问题，如下所示:

HML

<input type="text" ng-model="search">

JS

observeOnScope($scope, 'search')
  .debounceTime(300)
  .distinctUntillChanged()
  .switchMap(search)
  .safeApply($scope, function (data) {
     $scope.data = data;
  })
  .subscribe();

function search() {
  return rx.Observable.fromPromise($http({ ... }));
}

编辑:可以在here找到更深入的文章