client waiting on server promise to resolve

Question

I have a scenario where I'm performing a fetch request to an express server. The express server is then performing a fetch request to a rails api service. So I have the client side waiting on a promise to resolve, and that promise will resolve once the server-side promise resolves after communicating with the rails api.

and on the express side, I'm only calling res.json() once the promise on the server resolves.

here's what the server request looks like:

apiRouter.post('/login', (req, res) => {
  const partnerId = 'id';
  const apikey = 'key';
  const apikeyIdentifier = 'id';
  const cerebroUrl = `http://${apikeyIdentifier}:${apikey}@localhost:3000/v1/${partnerId}/login`;
  const data = {
    //data
  };

  httpRequest(cerebroUrl, httpMethods.post, data).then(response => {
    res.json(response);
  }).catch(error => {
    console.log(error.response.status);
    res.json(error.response);
  });
});

and the client request:

const url = '/api/login';
const data = { username, password };
return httpRequest(url, httpMethods.post, data).then(response => {
  console.log('success', response);
  return response;
}).catch(error => {
  console.error('error', error);
});

and I have a helper method that checks the status before resolving:

export const checkStatus = response => {
  console.log(response.status);
  console.log(response);
  if (response.status >= 200 && response.status < 300) return response;
  let error = new Error(response.statusText);
  error.response = response;
  throw error;
};

the weird thing is, in the checkStatus method the console is logging 200 for a response status, but in the the client request.then the response has a 422.

I believe the initial client request is first resolving as a 200, but then when the server promise resolves and I get a 422, the client side is already past that stage. Or something...

Is there a way to handle the promises in a way that's more predictable?

here's what the fetch request function looks like:

export const httpRequest = (url, method, data) => {
  return fetch(url, {
    method,
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
    },
    body: JSON.stringify(data),
  })
  .then(checkStatus)
  .then(parseJSON)
  .then(response => {
    return response;
  });
};

Answer 1

After debugging I found out that I have to set the status code manually on the server-side promise .catch

apiRouter.post('/login', (req, res) => {
  const partnerId = 'id';
  const apikey = 'key';
  const apikeyIdentifier = 'id';
  const cerebroUrl = `http://${apikeyIdentifier}:${apikey}@localhost:3000/v1/${partnerId}/login`;
  const data = {
    //data
  };

  httpRequest(cerebroUrl, httpMethods.post, data).then(response => {
    res.json(response);
  }).catch(error => {
    console.log(error.response.status);
    res.status(error.response.status); // <-- HERE ---
    res.json(error.response);
  });
});

otherwise it was returning a 200, which is strange because the error.response is an object whose status is 422, and the checkStatus function checks that. Maybe I'm misunderstanding what is actually sent back when performing a res.json()

it doesn't make sense to me though because before setting the status manually, I had the following catch:

 .catch(error => {
      res.json(error.response);
    });

and 2 console.logs:

export const checkStatus = response => {
  console.log(response.status);
  console.log(response);

and these were returning:

200

{... status:200, statusText: 'OK' ...}

and all I changed so far is this:

.catch(error => {
  res.status(error.response.status);
  res.json(error.response);
});

and now it logs:

422

{... status:422, statusText: 'My custom status text' ...}

I don't understand why changing only the res.status also updates the response object itself...