Question

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

我有一个搜索输入，可以在您键入时查询服务器。我对其进行了去抖，设定为300毫秒。但是，有时会出现一些奇怪的行为：

用户类型＆＃34; ab＆＃34;，等待300毫秒，类型＆＃34; c＆＃34;在第一个请求结算之前。在搜索栏中，他们看到＆＃34; abc＆＃34;，但现在有两个网络请求。有时第二个请求（＆＃34; abc＆＃34;）首先解析，然后第一个请求（＆＃34; ab＆＃34;）解析并覆盖结果列表。因此，用户会看到＆＃34; ab＆＃34;的结果列表，但搜索输入有＆＃34; abc＆＃34;。

这似乎不是一个去抖本身的问题，而是更多的找到一种方法来丢弃＆＃34; old＆＃34;承诺，以便他们解决时可以忽略。

所以例如 - 我想要什么

类型"ab"
发送请求＆＃34; ab＆＃34;
类型"c"
发送请求＆＃34; abc＆＃34;
＆＃34; ABC＆＃34;返回响应，处理承诺解决方案
＆＃34; AB＆＃34;返回响应，忽略承诺

Angular中是否存在此类事物的常见模式/方法？这听起来像是一个普遍的问题。

E.g＆＃34;仅解决已创建的最新承诺＆＃34;？

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中最新异步请求响应的模式？

2 个答案: