How to access response json when status is above 400? The server returns a message from the response that I want to display on the frontend.
My request function is shown below.
export class ResponseError extends Error {
public response: Response;
constructor(response: Response) {
super(response.statusText);
this.response = response;
}
}
/**
* Parses the JSON returned by a network request
*
* @param {object} response A response from a network request
*
* @return {object} The parsed JSON from the request
*/
function parseJSON(response: Response) {
if (response.status === 204 || response.status === 205) {
return null;
}
return response.json();
}
/**
* Checks if a network request came back fine, and throws an error if not
*
* @param {object} response A response from a network request
*
* @return {object|undefined} Returns either the response, or throws an error
*/
function checkStatus(response: Response) {
if (response.status >= 200 && response.status < 300) {
return response;
}
const error = new ResponseError(response);
error.response = response;
throw error;
}
/**
* Requests a URL, returning a promise
*
* @param {string} url The URL we want to request
* @param {object} [options] The options we want to pass to "fetch"
*
* @return {object} The response data
*/
export async function request(
url: string,
options?: RequestInit,
): Promise<{} | { err: ResponseError }> {
const fetchResponse = await fetch(url, options);
const response = checkStatus(fetchResponse);
return parseJSON(response);
}
Is it possible to convert this function? I do not have access to the error response at this point.
You could wrap it in a try catch block, and show the error message when you get a 400 error.
try {
nonExistentFunction();
} catch (error) {
console.error(error);
// Do something with the error, or try again.
// expected output: ReferenceError: nonExistentFunction is not defined
// Note - error messages will vary depending on browser
}
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch