promise catch does not parse json

Question

I'm using Angular Http to post to my API, when the status of the response is 200 it parses it properly and outputs just my response as expected, I handle this withing the first .then() on the promise but when my API has an error I throw it with a status of 400 and attempt to handle it via the .catch() block.

The issue I'm having is that the .catch() doesn't have just my raw json error from my api, it's just undefined. My error response from my API looks something like:

{
    "status": 400,
    "message": "Bad request",
    "errors": [
        {
            "code": "IN_USE",
            "message": "Email is in use",
            "field": "email"
        }
    ],
    "data": []
}

I have ensured that I'm sending application/json headers with both a 200 and 400 response so I'm not sure why my typescript code would not be parsing the json on .catch()

My Typescript consists of two files api and user , user just extends api in order to use the post() method I created:

api.ts

/**
  * POST to the API
  * @param path    Where to go
  * @param params  What to send
*/
public post(path, params): Promise<any> {
  return this.http
    .post(this.apiUrl + path, params)
    .toPromise()
    .then(r => r.json());
}

user.ts

/**
  * Registers a user and then logs them in via token
  * @param name Users name
  * @param email Users email
  * @param password Users password
*/
register(name: string, email: string, password: string) {
  this.post('/register', {
    access_token: this.accessToken,
    name: name,
    email: email,
    password: password
  })
  .then(r => {
    // This logs the json just fine
    console.log(r);
  })
  .catch(r => {
    // This is undefined
    console.log(r);
  });
}

Answer 1

You can try checking for status messages in the .then(r => ) section and then according to the status you can proceed with your logic.

register(name: string, email: string, password: string) {
  this.post('/register', {
    access_token: this.accessToken,
    name: name,
    email: email,
    password: password
  })
  .then(r => {
    // This logs the json just fine
   if(r.status == 200){
     console.log(r);
   }
   if(r.status == 400){
     console.log(r);   
    }


  })
  .catch(r => {
    // This is undefined
    console.log(r);
  });
}

Answer 2

As your request is failling (400 status code), it's not going to pass throug the then callback, it will go to the catch one, as you don't have any in the post method it will bubble to the register method catch, as you didn't parse to json it won't be a json.

Try this:

public post(path, params): Promise<any> {
  return this.http
    .post(this.apiUrl + path, params)
    .toPromise()
    .then(r => r.json())
    .catch(e => throw new Error(e.json()));
}