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

发现了一个与去抖输入和处理响应相关的错误。用于处理Angular中最新的异步请求响应的模式？

我有一个搜索输入，可以在您输入时查询服务器。我把它的反弹设置为300ms。但是，有时会出现一些奇怪的行为：

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

这看起来似乎不是一个反弹本身的问题，更多的是寻找放弃“旧”承诺的方式，以便在解决时可以忽略它们。

因此，例如

- 我想要

类型"ab"
发送请求 “AB”
类型"c"
发送请求 “ABC”
“ABC”返回响应，处理承诺分辨率
“AB”返回响应，忽略承诺

是否有任何共同的模式/接近了这样的事情在角？这听起来像是一个普遍的问题。

E.g“仅解决创建的最新承诺”？

来源

2016-04-22 AgmLauncher

你可以提供理解你的代码？ – Grundy

用'Promises'解决这个问题的确很困难。上面描述的问题是将'RxJS'引入到您的应用程序中的完美用例。使用'RxJS'，你有''distinctUntilChanged（）'和'switchMap（）'等操作符来解决这个问题。 – Dieterg

您可以创建队列，请参阅http://stackoverflow.com/questions/26859275/make-a-jquery-function-wait-till-its-previous-call-has-been-resolved/。虽然问号标签'jquery'模式也可以使用原生的'Promise' – guest271314

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

如果包含这个库，你应该能够如下解决你的问题：

HML

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

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

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

编辑：更深入的文章可以发现在here

来源

2016-04-22 14:41:34 Dieterg

不幸的是，向我所处理的应用程序添加新的依赖关系是一个过程，但在玩完这个之后，它肯定是要走的路。目前，我决定使用绑定到成功处理程序的随机令牌跟踪最新的请求，并且如果绑定的令牌与当前令牌不匹配，则只需从处理程序中退出。它现在可行，但我会创建一个技术债务来添加和重构RxJS，因为这显然是正确的路要走。谢谢您的帮助！ – AgmLauncher

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

回答

相关问题