Angular http:通过链接来防止调用多个请求

Question

我有一个 API PUT 来/api我想通过链接来防止同时发送多个请求：第二个调用应该等待第一个调用完成，依此类推。不应忽略任何呼叫(我不谈论油门/去抖动/速率限制(。

目前，我想出的唯一解决方案是Promise

@Injectable({providedIn: 'root'})
export class ApiService {
private lastCall: Promise<null> = Promise.resolve(null);
constructor(private readonly httpClient: HttpClient}
async update(data: Data): Promise<null> {
this.lastCall = this.lastCall.finally(() =>
this.httpClient.put<null>('/api', data).toPromise(),
);
}
}

我想知道rxjs是否有更好的解决方案，例如在 ngrx 效果中使用concatMap运算符，但我想在服务级别实现它：

update$ = createEffect(() => this.actions$.pipe(
ofType(updateAction),
concatMap(action => this.api.update(...)),
));

Answer 1

使用Subject发出您的 http 请求。创建一个可观察量，用concatAll扁平化此主题。在您的服务中订阅它。

您可以使用tap将观察器附加到您的 http 请求中。

import { Subject, Observable, PartialObserver } from "rxjs";
import { concatAll, tap } from "rxjs/operators";
@Injectable({providedIn: 'root'})
export class ApiService {
private requests = new Subject<Observable<any>>();
private update$ = this.requests.pipe(concatAll());
constructor(private readonly httpClient: HttpClient) {
this.update$.subscribe()
}
update(data: Data, observer: PartialObserver<any> = { complete: () => null }) {
this.requests.next(
this.httpClient.put<any>('/api', data).pipe(tap(observer))
)
}
}