用於處理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中最新的異步請求響應的模式？

回答

相關問題