将多个值从服务返回到 angular 中的组件

Question

I am using httpmodule to load data from backend. when I load data in service, I return it to component but I also want to return status code to component. Data model is already defined and can't change it.

service

getData(offSet, maxResults): Observable<Data> {
    return this.http.get(this.url+"?offset="+offSet+"&maxResults="+maxResults);
}

component

this.dataService.getData(0, this.maxResults).subscribe((data)=>{
      this.data = data;
      this.total = data.totalCount;
      this.pages = Math.ceil(this.total / this.maxResults);
});

I want

I want to get status code from subscribe callback like below

this.dataService.getData(0, this.maxResults).subscribe((data, status_code)=>{
      this.data = data;
      this.total = data.totalCount;
      this.pages = Math.ceil(this.total / this.maxResults);
});

Answer 1

When doing the HTTP request, you can pass the option observe: 'response' . Then instead of the data, a HttpResponse object is being returned, which also contains the status code:

Service:

getData(offSet, maxResults): Observable<HttpResponse<Data>> {
    return this.http.get(this.url+"?offset="+offSet+"&maxResults="+maxResults, { observe: 'response' });
}

Component:

this.dataService.getData(0, this.maxResults).subscribe((response)=>{
      this.data = response.body;
      this.total = response.body.totalCount;
      this.pages = Math.ceil(this.total / this.maxResults);
      // you can use response.status here
});

Answer 2

By default Angular HttpClient returns the body of the request. You should add observe: 'response' HttpOption to reach headers, statusCode etc.

so, you should change your service.

  getData(offSet, maxResults): Observable<{data: Data, statusCode: number}> {
    return this.http.get(this.url+"?offset="+offSet+"&maxResults="+maxResults, {observe: }).pipe(
      map((response: HttpResponse<Data>) => {
        return {
          data: response.body,
          statusCode: response.status
        }
      });
    )
}

Now it returns an object which has data and statusCode property, so you can reach them as the following;

  this.dataService.getData(foo,bar).subscribe(response => {
    const { data, statusCode } = response;
    // do something...
  });