How to read the status from response in angular http?

Question

I am facing some problem in reading the status code from response.

I am calling api in service,

return this.http.get<string>( this.remoteServer + '/google.com/open', httpOptions);

In my controller I have,

open() {
    this.openService.open(this.selected.qrCode)
    .subscribe(
      data => {
       console.log(data);
       this.toastService.showSuccess('Unlock Successfull', 'success');
      }
    );
  }

Now I want to read the http statustext,

the sample http response I am getting from the above call is.

HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "https://google.com/open", ok: false, …}

How to read the status text in the controller.

Please help me

Answer 1

You can specify { observe: 'response' } as the second parameter to get request which gives you the full response data.

If you want to send other options like headers or params along with it, just rollup all of them in a single object this way.

const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json'}), params : myParams, observe: 'response'}

Reference

return this.http.get<string>(
    this.remoteServer + '/google.com/open', httpOptions).subscribe((data) => {
        console.log(data.status);     // staus 200
        console.log(data.statusText);  // OK
});

Answer 2

We can also get the complete response by adding the { observe: 'response' } in our request.

return this._http.get<any>(this.serverUrl+'categories/'+id, { observe: 'response' })

Answer 3

The {observe:'response'} options qualifier can be added to either a get or a put on the HttpClient object. It should be added as an additional comma separated field to any existing options which you might have defined. See below for an example of a simple Put statement modified to return the full http content. This can be used for standardized status reporting in your application.

    body = this.currentDocument;

    let url = environment.base_url + 'api/Document/updateDocument';

    // For a put the options block is the third parameter. For a get this would be the second
    this.httpClient.put(url, body,
        {
            headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
            withCredentials: true,
            // Add the observe block to the existing option parameters
            observe:'response'
        })
        .subscribe(
            response => {

                statusMessage = new StatusMessage();
                statusMessage.HttpStatus = response.status;
                statusMessage.StatusText = response.statusText;

                // This example uses an EventEmitter but you could do any kind of logging here
                this.updateStatusPanel.emit(statusMessage);
                // The JSON body of this response can be accessed via the response.body parameter
            },
            err => {}
        );

Answer 4

Will data.status give you what you want?