0

To get data I am doing:

data = this.http.get(url, httpOptions);

But this is only returning the body. I need the entire response to get the status. I know this syntax:

data = this.http.get(url, {observe: 'response'});

But this is replacing my httpOpttions which will make me unauthenticated. I can't add another argument on GET like I can in POST. Please help!

Lee Moe
  • 405
  • 1
  • 6
  • 22
  • maybe this can help you, https://angular.io/guide/http#reading-the-full-response – danywalls Feb 14 '19 at 22:21
  • @DanyParedes Thanks but I read it already. They didn't mention my case where I need to send authentication headers. – Lee Moe Feb 14 '19 at 22:36
  • maybe duplication of https://stackoverflow.com/questions/51049806/how-to-read-the-status-from-response-in-angular-http – rickz Feb 14 '19 at 23:36
  • @rickz Not it's not. None of the answers in StackOverflow addressed the fact that HttpClieht's `http.get` would take an authentication argument also. Even the official docs don't have this case, at least to my reading so far. – Lee Moe Feb 14 '19 at 23:43
  • Please show us how you are sending authentication. – rickz Feb 14 '19 at 23:55
  • It is like shown at https://stackoverflow.com/questions/50694913/angular-6-httpclient-passing-basic-auth-in-httpoptions – rickz Feb 14 '19 at 23:58

2 Answers2

4

The reason why you can't add a third parameter to your http.get is because it doesn't accept a third parameter. The observe "syntax" IS part of the httpOptions parameter, so all you need to do is merge what is in your httpOptions object with {observe: "response"}

For example, if your httpOptions looks like:

const httpOptions = {
  headers: {
    "Content-Type": "application/json"
  }
}

You can combine that with the observe object above like this:

const httpOptions = {
  headers: {
    "Content-Type": "application/json"
  },
  observe: "response"
}

If you are accepting httpOptions as an argument (so you can't create a new one from scratch like in the previous example), you can just write the observe field directly on it:

httpOptions.observe = "response"

Either of these methods will preserve your current httpOptions object and add the observe: "response" field to it.

EDIT

For this method to work, you will need to "lie" to the compiler about observe's type to allow it to compile. You can do this by adding as any to the end of "response" in your httpOptions object:

const httpOptions = {
  headers: {
    "Content-Type": "application/json"
  },
  observe: "response" as any
}

The reason this is needed is because TypeScript can't infer the type of your raw httpOptions object correctly (it wants "response" to be the literal "body"). Telling TypeScript to interpret "response" as any gets around this problem.

Justin Reusnow
  • 302
  • 3
  • 9
  • Thanks but I tried this and it didn't work. First I can't user plain object for `headers` either. It must be `headers: new HttpHeaders({ 'Content-Type': 'application/json' })`, and if I put `observe: "response"` underneath it like in `const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Authorization': headerAuthorization }), observe: "response" };` I get a huge type error. – Lee Moe Feb 14 '19 at 22:32
  • 1
    Interesting, you are correct. I believe it has to do with type inferencing though. It appears TypeScript can't determine that "observe" is being set to something valid, so, at least in the meantime, you can do this to have TypeScript accept it: `observe: "response" as any` – Justin Reusnow Feb 14 '19 at 22:40
  • You are officially a `life saver` ;) Thank you! I never knew `as any` existed. Strange that Google never thought about `GET` with authentication and status so that we needed to lie to its compiler. Thanks again! – Lee Moe Feb 15 '19 at 13:05
  • However, Justin, I have mention that this is still preventing me from sending my Authentication header :( Jeez! – Lee Moe Feb 15 '19 at 14:06
  • Hmm, it shouldn't be preventing that. I mean, again you can use that `as any` idiom anywhere you are assigning a value, so if you have `httpOptions.observe = "response";` and that is giving you an error, you can do it there as well with `httpOptions.observe = "response" as any;`. But maybe I am not understanding the problem correctly, how are you doing authorization? I assumed you were passing it in as a header, which is why you have `httpOptions` in the first place. Is that correct? – Justin Reusnow Feb 15 '19 at 14:28
  • 1
    OK, I made a mistake and corrected it. You're correct. The class `class LiveSaver{}` is back to you xD – Lee Moe Feb 15 '19 at 15:22
1

Use this code for getting the status.

Updated on [15/02/19] :


getOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json;charset=UTF-8',
    "authToken": this.token // contains the authToken as parameter in request header 
                            // of http.get method for authorisation.
  })
};

// For getting the whole response of the request including status code etc.
getOptions['observe'] = 'response';


return this.http.get(url, getOptions)
         .pipe(
           catchError(this.handleError)
         )
         .subscribe(res => {
             console.log(res);
           },
           err => {console.log(err)} );

Above updated code will result in giving the whole response

Todarmal
  • 198
  • 12
  • Thanks but you can't do `map` here. I'm getting `TypeError: this.http.get(...).map is not a function` – Lee Moe Feb 14 '19 at 22:44
  • import map from `rxjs` library as `import { map } from 'rxjs/operators'; ` – Todarmal Feb 14 '19 at 22:49
  • Dude you should be able to know that `http.get.().map()` won't use the imported `map` of `rxjs/operators`. For your `map` to work it must be a method in `http.get`. Thanks anyway! – Lee Moe Feb 14 '19 at 23:00
  • It depends on the version of the `angular` you are using or to be specific on the version of `httpClient` you are using. Refer [here](https://stackoverflow.com/a/54261874/3926940) and for official docs, refer [here](https://angular.io/guide/http#getting-error-details) – Todarmal Feb 14 '19 at 23:58
  • I'm using Angular 4. None of the reference pages you mentioned answers my question. They have no authentication in the request. Thanks! – Lee Moe Feb 15 '19 at 09:26
  • @LeeMoe, My apologies, for an incorrect understanding of the question. I have **updated** my answer according to the requirements of the question. Let me know if I have addressed your question. – Todarmal Feb 15 '19 at 11:33
  • Never mind, thanks for your help! I got the answer I needed from Justin. – Lee Moe Feb 15 '19 at 13:07