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解决方案比如concatMap运算符在ngrx效果中使用，但我想在服务层面实现：

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

Answer 1

使用Subject 发出您的http 请求。创建一个 Observable，用concatAll 展平这个主题。在您的服务中订阅它。

您可以使用 tap 将 Observer 附加到您的 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))
    )
  }
}