Question

如果我向服务器发出了新的http请求，但我希望取消它，那么我想取消上一个http请求。

如果函数中的某些值发生更改，我想取消请求如果值更改，则旧请求应取消而新请求应创建为此，我做到了 1）//创建了一个主题-可观察对象将观看的事物 public stringVar = new Subject（）; 2）//创建一个可观察对象以观看主题并发送更新流（您将订阅该更新以获取更新流）公共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时，它将继续。我的代码有什么问题？ / p>

在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并在您单击按钮并调用该方法时对其进行订阅。这些新的“可观察的”订阅导致多个网络请求。

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

仅供参考，您已正确选择switchMap运算符。它将丢弃如果有新事件同时发生，则是最新的网络通话。

这是您的工作示例：

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请求？

1 个答案: