丟棄慢速休息呼叫

常見的用例是丟棄某些使用者輸入後不再需要的某些休息呼叫。最突出的例子是,當使用者使用某些搜尋功能時,發出請求,發出另一個請求,並且由於某種原因,第一個請求在第二個請求之後到達,並且應用程式顯示舊請求的過期資料。

這是 switchMap-operator 的完美用例。

searchInput$
    .switchMap(() => makeRestCall());

在這種情況下,流將進入休息呼叫,但只有在 searchInput$ 上發出新資料之後,才會丟棄 switchMap 內的流並進行新的休息呼叫。因此,如果在下次點選之前完成,則僅考慮休息結果。

這是一個完全成熟的模仿的例子:

// some initial data-mocking
const Observable = Rx.Observable;
var counter = 1;
function mockDataFetch() {
    return Observable.of(counter++)
        .delay(500);
}

// the recipe

const searchInput$ = new Rx.Subject();
searchInput$
    .do(searchInput => console.log("Searching for " + searchInput))
    .switchMap(searchInput => mockDataFetch()
              .map(result => ({result, searchInput}))
     )
    .do(data => console.log("Received result for " + data.searchInput + ": " + data.result))
    .subscribe();

// simulating search inputs
searchInput$.next("google");
setTimeout(() => searchInput$.next("froogle"), 600);
setTimeout(() => searchInput$.next("doodle"), 800);
setTimeout(() => searchInput$.next("poodle"), 1000);
setTimeout(() => searchInput$.next("noodle"), 1600);

檢視現場演示: https//jsbin.com/suzakahoro/1/edit?js,console