如何用switchMap取消http请求？

Question

如果我向服务器发出了新的 http 请求，但它没有按我的预期工作，我想取消之前的 http 请求。

如果函数中的某些值发生更改，我想取消请求我的意思是如果值发生变化，旧请求应该取消，新请求应该创建为此我做了这个

1）创建了一个主题 - 将被可观察者观看的事物
public stringVar = new Subject<string>();

2) 创建一个 observable 来观察主题并发送更新流（您将订阅它以获取更新流）

public stringVar$ = this.stringVar.asObservable()

3) 在一个特定的函数中，我将值作为参数，所以我执行这些步骤

  testFunction(value){
      this.stringVar.next(listValueSelected);
      this.testOutput = this.stringVar$.pipe(
             switchMap(() => {
                return  this.teseService.getEntries(val_one, val_two,val_three);
           })
         )
         this.testOutput.subscribe(result => console.log(`${result}`));
    }

当值要改变时请求是可取消的，但第一次出现奇怪的行为时只有一个请求是模式，但是当我第二次单击时它调用 api 两次，这将继续。什么是我的代码有问题吗？

在component.ts

export class TestComponent {
    testOutput :Observable<any>;
    stringVar =  new Subject<number>();
    stringVar$ = this.stringVar.asObservable();

 testResult(selectedValue) {
       this.stringVar.next(selectedValue);
       this.stringVar$.subscribe(data => {
      });
       this.testOutput = this.stringVar$.pipe(
             switchMap(() => {
                return  this.testService.getTestEntries(this.x,this.y,this.z);
           })
         )
         this.testOutput.subscribe(result => console.log(`${result}`));
    }

}

在服务文件中

getTestEntries(x, y,selectedValue): Observable<any>{
        let apiUrl = selectedValue=='3'?this.baseUrl1:this.baseUrl ;

        return this.http.post(apiUrl,obj).map((response: Response) => {

              return response;
        })
      }

如果组件中的值 "selectedValue" 发生变化，我想取消我的旧请求并创建新请求。

Answer 1

我相信每当您单击按钮时都会调用您的方法 testResult(selectedValue)，因此这将创建新的 Observable 并在您单击按钮并调用该方法时订阅它。这些新的 Observable 订阅导致多个网络请求。

理想情况下，您只想在构造函数 中订阅 stringVar$ 一次，当某些内容发生变化时，只需在 stringVar 主题中发出更新的值。由于 Observable 订阅只有一个并且已经存在，它将捕获发出的新值并在 switchMap 运算符的帮助下创建新的 http 请求。

FYI you have correctly chosen switchMap operator. It will discard latest network call if new event arrives in the meantime.

这是您的工作示例：

export class TestComponent {
  testOutput: Observable<any>;
  stringVar = new Subject<number>();
  stringVar$ = this.stringVar.asObservable();

  constructor() {
    this.testOutput = this.stringVar$.pipe(
      switchMap(() => {
        return this.testService.getTestEntries(this.x, this.y, this.z);
      }),
    );
    this.testOutput.subscribe((result) => console.log(`${result}`));
  }

  testResult(selectedValue) {
    this.stringVar.next(selectedValue);
  }
}

如何用switchMap取消http请求？

How to cancel http request with switchMap?

angular

http

rxjs

observable

switchmap