如何获取响应头？

Question

我正在使用 angular 15.0. 我从后端（asp.net core 5）获得了一个项目列表，其中一个项目附加到 header。客户端服务中的 get 方法是：

 /** GET Paged commodities from the server ===============================*/ getPagedCommodities(pageSize: number, pageNumber: number): Observable<CommodityForList[]> { let params: HttpParams = new HttpParams(); params = params.append('pageSize', pageSize); params = params.append('pageNumber', pageNumber); const headers = new HttpHeaders({ observe: 'response' }); return this.http.get<CommodityForList[]>(this.baseUrl + '/getPagedCommodities/', { headers, params }); }

该方法向服务端发送两个参数，获取商品列表和totalCount ，对列表进行分页。 我需要totalCount将mat-paginator和商品列表的length属性设置为可观察的，以便为用户提供动态搜索。 因此，在commoditiesList组件中，用于此目的的代码片段是：

 commoditiesForList$:; Observable<CommodityForList[]>. this.commoditiesForList$ = this.commoditiesService.getPagedCommodities(this,pageSize. this;pageIndex+1). this.commoditiesForList$.subscribe( res => { const totalCount = res.headers;get('X-Pagination'); })

但是，这里我有一个错误： Property 'headers' does not exist on type 'CommodityForList[]'. 当我将commoditiesForList$的类型更改为HttpResponse<CommodityForList[]>时，错误可能已修复，但接收商品列表作为可观察的将有问题。 是否有一种解决方案可以将商品列表作为可观察的并从 header 中单独读取totalCount ？ 感谢您的答复。

Answer 1

参见https://angular.io/guide/http#reading-the-full-response

您可能需要比响应正文中包含的更多有关交易的信息。 有时服务器会返回特殊的标头或状态代码，以指示对应用程序工作流很重要的某些条件。

  getPagedCommodities(pageSize: number, pageNumber: number): Observable<HttpResponse<CommodityForList[]>> {
    // ...
    return this.http.get<CommodityForList[]>(this.baseUrl + '/getPagedCommodities/', { headers, params });
  }

您可以在body属性中访问 body。

也可以参见Angular：HttpClient 使用 Observable Array 读取完整响应。

Answer 2

根据您的示例，您可以在 HTTP 请求中使用下一个配置： {responseType: 'json', observe: 'events' } 。 请参阅此处关于stackblitz 的工作示例 - 一个请求

commoditiesForList$!: BehaviourSubject<CommodityForList[]>;
totalCount$!: BehaviourSubject<any>;

constructor(commoditiesService: CommoditiesService) {
this.commoditiesService.getPagedCommodities(this.pageSize, this.pageIndex+1).subscribe(res => {
  this.commoditiesForList$.next(res.body)
  this.totalCount$.next(headers.get('X-Pagination'))
})
}

原始答案

根据您的示例，您可以在 HTTP 请求中使用下一个配置： {responseType: 'json', observe: 'events' } 。 请参阅此处关于stackblitz 的工作示例 - 两个请求 - 共享 pipe

编辑：为避免发出两个请求，请注意 GET 请求使用来自 rxjs 的共享运算符。感谢 Arber 注意到它。

getPagedCommodities(pageSize: number, pageNumber: number): Observable<CommodityForList[]> {
    let params: HttpParams = new HttpParams();
    params = params.append('pageSize', pageSize);
    params = params.append('pageNumber', pageNumber);

    const headers = new HttpHeaders({
      observe: 'response'
    });

    return this.http.get<CommodityForList[]>(this.baseUrl + '/getPagedCommodities/',
    { headers, params, responseType: 'json',observe: 'events'}).pipe(share());

  }

那么您将以这种方式访问数据和标题

 commoditiesForList$!: Observable<CommodityForList[]>;
 
this.commoditiesForList$ = this.commoditiesService.getPagedCommodities(this.pageSize, this.pageIndex+1).pipe(
    map((res) => (res as any).body));

this.totalCount$ =  this.commoditiesService.getPagedCommodities(this.pageSize, this.pageIndex+1).pipe(
    map((res) => (res as any).headers)), map(headers => headers.get('X-Pagination')));

文档： https://angular.io/guide/http#requesting-data-from-a-server