面试题：Angular HttpClient模块异步请求的并发控制

Question

假设你在一个Angular项目中有多个使用HttpClient模块的异步请求需要同时发送，但你希望最多同时有3个请求处于活跃状态，当有新请求时，如果活跃请求达到3个，新请求需要排队等待，直到有请求完成。请阐述实现这种并发控制的思路，并给出核心代码示例。

Answer 1

实现思路

1. 使用一个队列来存储所有需要发送的请求。
2. 维护一个计数器，记录当前活跃的请求数量。
3. 当活跃请求数量小于3时，从队列中取出请求并发送。
4. 每个请求完成后，减少活跃请求计数器，并检查队列中是否还有等待的请求，如果有则取出并发送。

核心代码示例

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, from, merge, of } from 'rxjs';
import { map, mergeMap, tap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class RequestService {
  private activeRequestCount = 0;
  private requestQueue: (() => Observable<any>)[] = [];
  private maxConcurrent = 3;

  constructor(private http: HttpClient) {}

  addRequest(request: () => Observable<any>) {
    this.requestQueue.push(request);
    this.processQueue();
  }

  processQueue() {
    while (this.activeRequestCount < this.maxConcurrent && this.requestQueue.length > 0) {
      const requestFn = this.requestQueue.shift();
      if (requestFn) {
        this.activeRequestCount++;
        requestFn().pipe(
          tap(() => this.activeRequestCount--),
          tap(() => this.processQueue())
        ).subscribe();
      }
    }
  }
}

使用示例：

import { Component } from '@angular/core';
import { RequestService } from './request.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private requestService: RequestService) {
    this.addRequests();
  }

  addRequests() {
    const requests = [
      () => this.requestService.http.get('url1'),
      () => this.requestService.http.get('url2'),
      () => this.requestService.http.get('url3'),
      () => this.requestService.http.get('url4'),
      () => this.requestService.http.get('url5')
    ];
    requests.forEach(request => this.requestService.addRequest(request));
  }
}