为什么switchMap不取消重复请求?

Why switchMap does not cancel repeated request?

请求在服务器上执行:

ngOnInit(): void {
    this.route.paramMap
      .pipe(
        switchMap((params) => {
          return this.spdModelManagerService
            .getSpdModelManager()
            .getOrderDefinitionVersions(params.get("orderid"));
        }),

        finalize(() => {
        })
      )
      .subscribe((data) => {
        console.log("aa");
      });
  }

如果多次执行 f5 或通过路由,请求总是发送到服务器并且不会被 switchMap ((params) => {}) 取消。从所有请求中得到答案。

我应该使用解析器还是什么?如果用户很多时间请求一条路线,它会发送很多请求

这有点像 hack,但这类似于我在缓存某些请求时所做的事情。本质上,如果 get 的输入相同并且响应始终相同,您可以将可观察对象缓存在服务上的 属性 中,并使用 shareReplay 重新发出最后发出的值。然后,如果输入更改覆盖 属性 导致新的可观察值被解析为 return 新值。

示例服务

import { Injectable } from "@angular/core";
import { Observable, timer, of } from "rxjs";
import { publishReplay, map, shareReplay } from "rxjs/operators";

@Injectable()
export class ExampleService {
  private savedObs$: Observable<any>;
  private lastId: number;

  constructor() {}

  get(id: number) {
    const randomReturnValue = Math.random();

    if (this.lastId !== id) {
      this.lastId = id;
      this.savedObs$ = of(id).pipe(
        shareReplay(1),
        map(x => randomReturnValue)
      );
    }

    return this.savedObs$;
  }
}

组件

import { Component } from '@angular/core';
import { ExampleService } from './example.service';
import { tap } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  constructor(private exampleService: ExampleService) {
    // To show that the same value is returned for the first 7 calls to the observable
    for (let i = 0; i < 15; i += 1) {
      if (i < 7) {
        this.exampleService.get(1).pipe(
          tap(x => {
            console.log(x);
          })
        ).subscribe();
      } else {
        this.exampleService.get(i).subscribe(x => {
          console.log(x);
        });
      }
    }

  }
}

如果您在 Stackblitz 中打开控制台,您可以看到由于 ID 相同,前七个调用的值相同 returned,然后每次有新 ID 时都会更改通过。不可否认,这有点麻烦,但它可能会满足您的需求。

https://stackblitz.com/edit/angular-6dioyr