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

Question

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

我有一个搜索输入，可以在您键入时查询服务器。我将它的去抖设置为 300 毫秒。但是，有时会有一些奇怪的行为：

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

这本身似乎不是一个反跳问题，更多的是寻找一种方法来丢弃 "old" 承诺，以便在解决时可以忽略它们。

举个例子——我想要的

类型"ab"
发送请求"ab"
类型"c"
发送请求"abc"
"abc" returns响应，处理承诺决议
"ab" returns响应，忽略承诺

在Angular中有没有常见的patterns/approaches这种东西？这听起来像是一个常见问题。

例如"Resolve only the latest promise that was created"?

Answer 1

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

如果您包含此库，您应该能够按如下方式解决您的问题：

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

上找到更深入的文章

Answer 2

您只需使用订阅即可实现。

import { Subscription } from 'rxjs';  

export class Component  {
constructor(){}
    subscription: Subscription;

    getData() {
       // just check if subscription is already there then unsubscribe that 
        if (this.subscription) {
          this.subscription.unsubscribe();
        }
        this.subscription = this._http.get(url).subscribe(
          data => {
            console.log(data);
          },
          error => {
            console.log(error);
          }
        )

      }
}

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

Patterns for handling the response of only the latest async request in Angular?

javascript

promise

angularjs

debouncing