如何获取响应头？

Question

I am using angular 15.0. I get a list of items from backend (asp.net core 5) with an item appended to the header. the get method in the client side service is:

 /** 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 }); }

this method sends two parameters to the server and gets commodities list along with totalCount to paging the list. I need the totalCount to set the length property of mat-paginator and commodities list as observable to provide a dynamic search for user. therefore, in the commoditiesList component, the snippet code for this purpose is:

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

but, here I have an error: Property 'headers' does not exist on type 'CommodityForList[]'. when I change the type of commoditiesForList$ to HttpResponse<CommodityForList[]> , the error may be fixed, but receiving the commodities list as observable will have a problem. Is there a solution to get the commodities list as observable and read the totalCount separately from the header? thank you for your response.

Answer 1

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

You might need more information about the transaction than is contained in the response body. Sometimes servers return special headers or status codes to indicate certain conditions that are important to the application workflow.

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

You can access the body in the body attribute.

See maybe also Angular: HttpClient read full response with Observable Array .

Answer 2

Given your example, you could use the next configuration on your HTTP request: {responseType: 'json', observe: 'events' } . See a working example here on stackblitz - one request

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'))
})
}

Original Answer

Given your example, you could use the next configuration on your HTTP request: {responseType: 'json', observe: 'events' } . See a working example here on stackblitz - two requests - shared pipe

Edit: to avoid making two request, notice that GET request is using share operator from rxjs. Thanks Arber to notice it.

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());

  }

then you will access data and headers in this way

 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')));

Docs : https://angular.io/guide/http#requesting-data-from-a-server