Angular+RxJS中POST请求批量重取的服务模式实现问询

核心思路是为每个list()请求创建独立的重取触发源，避免全局信号导致所有历史请求重复发起。我们将数据流与重取方法封装在一起，让组件自行控制自身请求的重取操作，完全满足“仅当前订阅者触发一次重取”的需求。

1. 定义封装接口 #

在appointments-api.service.ts中定义接口，同时暴露数据流和重取方法：

import { Observable } from 'rxjs';
import { HttpState } from './your-path-to-http-state'; // 替换为实际HttpState路径

interface RefetchableObservable<T> {
  data$: Observable<HttpState<T>>;
  refetch: () => void;
}

2. 修改list()方法实现 #

调整list()方法，为每个请求创建专属的Subject作为重取信号源，通过switchMap触发API请求：

import { Injectable } from '@angular/core';
import { Subject, switchMap, shareReplay, startWith } from 'rxjs';
import { ApiService } from './api.service';
import { AppointmentListRequest, AppointmentListResponse } from './your-path-to-models';

const listUrl = '/api/appointments/list'; // 替换为实际接口地址

@Injectable({ providedIn: 'root' })
export class AppointmentsApiService {
  constructor(private apiService: ApiService) {}

  public list(requestBody: AppointmentListRequest): RefetchableObservable<AppointmentListResponse> {
    // 为当前请求创建独立的重取触发器
    const refetchTrigger$ = new Subject<void>();

    // 初始自动触发一次请求，后续通过refetchTrigger$触发重取
    const data$ = refetchTrigger$.pipe(
      startWith(void 0), // 触发初始加载
      switchMap(() => this.apiService.post<AppointmentListRequest, AppointmentListResponse>(listUrl, requestBody)),
      shareReplay(1) // 共享请求结果，避免组件内多订阅重复发起请求
    );

    return {
      data$,
      refetch: () => refetchTrigger$.next()
    };
  }
}

3. 组件中使用方式 #

组件通过封装对象获取数据流和重取方法，确保重取仅针对自身的请求：

// a.component.ts
import { Component } from '@angular/core';
import { AppointmentsApiService } from './appointments-api.service';

@Component({
  selector: 'app-a',
  templateUrl: './a.component.html'
})
export class AComponent {
  // 保存请求源对象，包含数据流和重取方法
  private appointmentRequest = this.appointmentsApi.list({ pageNumber: 0, pageSize: 3 });
  // 暴露数据流给模板的async pipe
  appointments$ = this.appointmentRequest.data$;

  constructor(private appointmentsApi: AppointmentsApiService) {}

  onCancel() {
    // 仅重取当前组件对应的API请求
    this.appointmentRequest.refetch();
  }
}

// b.component.ts
import { Component } from '@angular/core';
import { AppointmentsApiService } from './appointments-api.service';

@Component({
  selector: 'app-b',
  templateUrl: './b.component.html'
})
export class BComponent {
  private appointmentRequest = this.appointmentsApi.list({ pageNumber: 1, pageSize: 15 });
  appointments$ = this.appointmentRequest.data$;

  constructor(private appointmentsApi: AppointmentsApiService) {}

  onCancel() {
    this.appointmentRequest.refetch();
  }
}

4. 内存泄漏注意事项 #

• 组件销毁时，async pipe会自动取消对data$的订阅，此时refetchTrigger$的上游订阅也会终止，不会造成内存泄漏。
• 如果组件需要动态切换请求参数（比如分页切换），建议手动调用旧请求实例的refetchTrigger$.complete()，避免不必要的资源占用。

内容的提问来源于stack exchange，提问作者Jake Lindvall