Http Post using .map doesnt work when service return Http 400

Question

From my Typescript code, I invoke a webservice written in C#. My typescript code looks like this, and it works as expected when my service returns HTTP200, but when the server rejects the credentials and throws HTTP 400, it will not break inside the map function.

 return this.http.post(this.authenticationEndpoint, params)
        .map((response:Response) =>  {
                let resp = response;
                let token = response.json() && response.json().access_token;
                if(token){
                    this.token = token;
                    localStorage.setItem('user', JSON.stringify({userName: userName, token:token}));
                    return true;
                }

                return false;
            })

Looking at the definition of the Response class this defines properties like status, statusText and so on. Given my limited knowledge of Angular and Typescript I would assume that regardless of the Http code returned from my service, it will break inside the map function? How can I handle this case? My function return an Observable<boolean>

Use the `.catch` method to handle errors, or handle them in your subscriber. Also, there is no need to specify the type of the callback argument. `(response: Response) =>...` should just be `response =>` — Aluan Haddad, Aug 20 '17 at 15:26
What do you mean it won't break inside? Or did you use the wrong word and meant it breaks inside when you get a 400 response? Or do you mean it never goes inside the callback function? If it is the latter than you will need to do as Aluan mentions and use a catch or similar callback that is appropriate for the api you are using. — Patrick Evans, Aug 20 '17 at 15:34
Sorry, by Break I mean it will not hit the breakpoint on the first line let resp = response; — Tobias Moe Thorstensen, Aug 20 '17 at 16:22

solimanware · Accepted Answer · 2017-08-20T15:51:08.897

You need to catch the Observable Errors here's an Example:

export class ApiGateway {

  baseURL = "https://myapi.com"; // or sometimes pulled from another file
  constructor(private http: Http) {}

  get(path, params) {
      showLoadingIndicator();

      let headers = this.createMySpecialHeaders();
      let options = {
        headers: headers
      } // and whatever else you need to generalize
      let fullUrl = this.baseUrl + path + '?' + this.urlEncode(params)
      `;
    return this.get(path, params, options)
               .do(() => hideLoadingIndicator())
               .map(res => res.json())
               .catch(err => {
                    hideLoadingIndicator();
                  // show error message or whatever the app does with API errors etc
                  // sometimes rethrow the error, depending on the use case
                })
  }
}

Thanks for the answer. What I don't fully understand; When a HTTP400 occurs is it really an exception being thrown? Why can't this be handled inside the map method? Thanks! — Tobias Moe Thorstensen, Aug 20 '17 at 16:53
`map` happens on success, while `catch` happens on error. for further read https://stackoverflow.com/questions/35326689/how-to-catch-exception-correctly-from-http-request — solimanware, Aug 20 '17 at 17:00

Http Post using .map doesnt work when service return Http 400

1 Answers1