如何在Angular NgRx Effect中获取响应头的值

要获取API响应头中的分页信息并添加到NgRx Effect的payload里，需要分三步调整代码：修改API服务以返回完整响应、在Effect中提取头信息并组装payload、更新对应Action的类型定义。

1. 修改API服务，返回完整HTTP响应 #

Angular HttpClient默认仅返回响应体，要获取响应头需配置observe: 'response'，这样会返回包含头信息的HttpResponse对象：

filterCandidate(candidateFilter: candidateFilter): Observable<HttpResponse<Result<Candidate>>> {
  let params = new HttpParams(); // 初始化参数对象

  if (candidateFilter) {
    if (candidateFilter.keyword) {
      params = params.append('keyword', candidateFilter.keyword);
    }
  }
 
  params = params.append('pageNumber', candidateFilter.pageNumber.toString())
    .append('pageSize', candidateFilter.pageSize.toString())
    .append('sortBy', candidateFilter.sortBy)
    .append('sortByDirection', candidateFilter.sortDirection);

  // 关键配置：observe: 'response' 用于获取包含头信息的完整响应
  return this.httpClient.get<Result<Candidate>>(`${this.appConfig.apiUrl}/candidate/filter`, { 
    params,
    observe: 'response' 
  });
}

2. 修改NgRx Effect，提取响应头并组装Payload #

在Effect中处理返回的HttpResponse，提取头中的分页信息，再和响应体一起传给成功Action：

filterCandidates$ = createEffect(() => 
  this.actions$.pipe(
    ofType(candidateActions.filterCandidate),
    switchMap((payload) => 
      this.candidateApiService.filterCandidate(payload.candidateFilters, payload.options).pipe(
        tap(response => console.log('完整响应（含头）:', response)),
        map((response) => {
          // 从响应头提取分页信息（示例字段为X-Total-Count、X-Total-Pages，请根据后端实际字段调整）
          const totalCount = response.headers.get('X-Total-Count');
          const totalPages = response.headers.get('X-Total-Pages');

          // 组装包含结果和分页信息的payload
          return candidateActions.filterCandidateSuccess({ 
            result: response.body,
            pagination: {
              totalCount: totalCount ? parseInt(totalCount, 10) : 0,
              totalPages: totalPages ? parseInt(totalPages, 10) : 0,
              currentPage: payload.candidateFilters.pageNumber,
              pageSize: payload.candidateFilters.pageSize
            }
          });
        }),
        catchError((error: Error) => of(candidateActions.filterCandidateFailed({ error })))
      )
    )
  )
);

3. 调整Action类型定义 #

更新成功Action的payload类型，使其同时支持响应体和分页信息：

// 定义分页信息类型
export interface PaginationInfo {
  totalCount: number;
  totalPages: number;
  currentPage: number;
  pageSize: number;
}

// 更新成功Action的定义
export const filterCandidateSuccess = createAction(
  '[Candidate] Filter Candidate Success',
  props<{ result: Result<Candidate>, pagination: PaginationInfo }>()
);

注意事项 #

• CORS配置要求：如果后端返回的是自定义响应头（如示例中的X-Total-Count），需要在后端CORS配置中添加Access-Control-Expose-Headers字段，将这些头暴露给前端，否则headers.get()会返回null。例如：

  Access-Control-Expose-Headers: X-Total-Count,X-Total-Pages
  

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