Is there a way to retrieve the status code from the HttpClient module in Angular?

Question

Is there a way to retrieve the status code from the HttpClient module in Angular?

Can you find out how to retrieve the status codes for all requests using the HttpClient method?

callingAPI() {
    let headers = new HttpHeaders();
    headers = headers.append('Content-Type', 'application/json');
    headers = headers.append('Authorization', `Bearer ${this.token}`);

    this.http.post("URL",
      {
        "dataToSend": "data"
      }, {
      headers: headers
    }).subscribe(response => {

      console.log(response);

    },
      (error: HttpErrorResponse) => {
        if (error.status === 403) {
         console.log("Caught 403 status code");
        }
      }

      
    )
  }

Is there a way to determine the status code of an HTTP request that returns 202, 200, or other statuses?

angular typescript http angular-httpclient

Answer 1

Answer №1

Make sure to include observe: 'response' in the options parameter. This allows you to access the entire response within your subscription.

  public fetchData(): void {
    let headers: HttpHeaders = new HttpHeaders();
    headers = headers.append('Content-Type', 'application/json');
    headers = headers.append('Authorization', `Bearer ${this.token}`);

    this.http.post<HttpResponse<any>>(
      'URL',
      {
        dataToSend: 'data',
      },
      {
        headers: headers,
        observe: 'response',
      },
    ).subscribe(
      (responseData: HttpResponse<any>) => {
        if (responseData.status === 200 || responseData.status === 202) {
          console.log(`Received a successful status code: ${responseData.status}`);
        }
        console.log(`Response body: ${responseData.body}`);
      },
      (error: HttpErrorResponse) => {
        if (error.status === 403) {
          console.error('Caught 403 status code');
        }
      },
    );
  }

For more information, check out: https://angular.io/guide/http#reading-the-full-response

Answer 2

Make sure to include observe: 'response' in the options parameter. This allows you to access the entire response within your subscription.

  public fetchData(): void {
    let headers: HttpHeaders = new HttpHeaders();
    headers = headers.append('Content-Type', 'application/json');
    headers = headers.append('Authorization', `Bearer ${this.token}`);

    this.http.post<HttpResponse<any>>(
      'URL',
      {
        dataToSend: 'data',
      },
      {
        headers: headers,
        observe: 'response',
      },
    ).subscribe(
      (responseData: HttpResponse<any>) => {
        if (responseData.status === 200 || responseData.status === 202) {
          console.log(`Received a successful status code: ${responseData.status}`);
        }
        console.log(`Response body: ${responseData.body}`);
      },
      (error: HttpErrorResponse) => {
        if (error.status === 403) {
          console.error('Caught 403 status code');
        }
      },
    );
  }

For more information, check out: https://angular.io/guide/http#reading-the-full-response

Answer 3

Answer №2

To make API calls in Angular, utilize HttpErrorResponse and HttpResponse from the package '@angular/common/http'

makeApiCall() {
  let headers = new HttpHeaders();
  headers = headers.set('Content-Type', 'application/json');
  headers = headers.set('Authorization', `Bearer ${this.token}`);

  this.http.post<HttpResponse<any>>('URL', { data }, { headers }).subscribe(response => {
      console.log(response.status) // log status code
  }, (error: HttpErrorResponse) => console.log(error.status))

}

Answer 4

To make API calls in Angular, utilize HttpErrorResponse and HttpResponse from the package '@angular/common/http'

makeApiCall() {
  let headers = new HttpHeaders();
  headers = headers.set('Content-Type', 'application/json');
  headers = headers.set('Authorization', `Bearer ${this.token}`);

  this.http.post<HttpResponse<any>>('URL', { data }, { headers }).subscribe(response => {
      console.log(response.status) // log status code
  }, (error: HttpErrorResponse) => console.log(error.status))

}

Answer 5

Answer №3

For those utilizing HttpClient library, below is a sample code snippet:

this.httpClient.post(myEndpoint, requestBody, { headers : customHeaders, observe: 'response' }).subscribe(
  response => {
    console.log(JSON.stringify(response, null, 2));
  },
  error => {
    console.error(error.errorMessage);
});

Answer 6

For those utilizing HttpClient library, below is a sample code snippet:

this.httpClient.post(myEndpoint, requestBody, { headers : customHeaders, observe: 'response' }).subscribe(
  response => {
    console.log(JSON.stringify(response, null, 2));
  },
  error => {
    console.error(error.errorMessage);
});

Is there a way to retrieve the status code from the HttpClient module in Angular?

Answer №1

Answer №2

Answer №3

Similar questions

Employ an asynchronous immediately-invoked function expression within the callback

Angular Dropdown Menu

Angular throws an error when attempting to access a property that is undefined

Error: inability to execute performanceMeasurement.startMeasurement due to its absence in the function definition

Utilizing a single Angular 2 app to incorporate various components on a single page

How can the creation of directories for services be avoided in angular-cli?

Angular2 - Easily update form fields with just a click

Utilizing Angular for Webcam Integration

Encountering TypeScript error TS2339 while mocking a React component with Jest

Warning: Unhandled promise rejection detected

Minimize property names with Webpack

retrieve the key associated with a translated value using ngx-translate

"Exploring the Application of Post Parameters in REST Services

Tips for preventing HTTP calls within chained Angular subscriptionsHere are some strategies to prevent

How can I customize a currency directive in AngularJS using filters?

Issue with file uploading in Angular 9 as the uploaded file is not being added to the

Having trouble resolving all parameters for AuthService in Angular

Is it possible for me to create an If statement that can verify the current index within a Map?

What is a more efficient way to differentiate a group of interfaces using an object map instead of using a switch statement?

Guide on Incorporating an Image into Jhipster Angular