RxJs 和 switchMap答案

【问题标题】：RxJs and switchMapRxJs 和 switchMap
【发布时间】：2018-08-15 22:28:35
【问题描述】：

我想在我的网站上创建搜索引擎。我想用 switchMap 来取消之前的请求，因为这个函数是异步运行的。

我通过keyup从输入中获取数据，例如：

<input type="text" (keyup)="subject.next($event.target.value)">

打字稿

subject = new Subject<string>();

ngOnInit() {
this.subject.asObservable().pipe(debounceTime(500)).subscribe(res => {
  console.log(res);
});

}

我想在这里使用 switchMap 和计时器，但是什么不会改变，它总是不起作用，有没有人知道如何重构这段代码以使用 RxJs 中的 switchMap 和计时器？

我在 stackblitz 中的例子：

https://stackblitz.com/edit/angular-playground-53grij?file=app%2Fapp.component.ts

【问题讨论】：

I want to use switchMap to cancel previous request 之前的请求是什么？你还没有分享你尝试过的东西。

标签： javascript angular timer rxjs switchmap

【解决方案1】：

您可以尝试这样的事情（假设您使用的是 RxJS 6）：

subject = new Subject<string>();
subscription: Subscription;

ngOnInit() {
  this.subscription = this.subject
    .pipe(
      debounceTime(500),
      switchMap((query: string) => {
        return this.http.get('http://url?q=' + query);
      })
    )
    .subscribe((res: any) => {
      console.log(res);
    });
}

ngOnDestroy() {
  this.subscription.unsubscribe();
}

【讨论】：