为什么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 时都会更改通过。不可否认,这有点麻烦,但它可能会满足您的需求。
请求在服务器上执行:
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 时都会更改通过。不可否认,这有点麻烦,但它可能会满足您的需求。