I am using the fetch API with a REST API, and i want to handle certain errors globally, errors like 500, 503 ... I tried doing something like this
function(url, method, data) {
return fetch(url, {
method: method || "GET",
body: JSON.stringify(data),
mode: "cors",
headers: {
"Content-Type": "application/json; charset=utf-8"
}
}).then(response => {
if (response.ok && response.status < 500) console.log("ouch");;
return response;
});
but it doesn't seem to be working. how do i catch 500, 503 ... in the fetch api?
I am using the fetch API with a REST API, and i want to handle certain errors globally, errors like 500, 503 ... I tried doing something like this
function(url, method, data) {
return fetch(url, {
method: method || "GET",
body: JSON.stringify(data),
mode: "cors",
headers: {
"Content-Type": "application/json; charset=utf-8"
}
}).then(response => {
if (response.ok && response.status < 500) console.log("ouch");;
return response;
});
but it doesn't seem to be working. how do i catch 500, 503 ... in the fetch api?
-
1
it doesn't seem to be workingin what way? it doesn't look like you're handling any errors at all - also, you've got a function expression there ... clearly not actual code as that isn't allowed like that (although, the last line});suggests this snippet is just a poorly chosen fragment of your actual code) – Jaromanda X Commented Jul 12, 2018 at 4:16 - 1 fetch is a promise event so any error must caught in catch statement – Navdeep Singh Commented Jul 12, 2018 at 4:25
-
@NavdeepSingh yeah i want something like a global
catchandthen– zolamk Commented Jul 12, 2018 at 5:08 -
Create a
fetchwrapper that supports global / top-level response interceptors / error handlers. Or you know, just use Axios. – Phil Commented Jul 12, 2018 at 5:09
2 Answers
Reset to default 15You can try the following approach, by using it you can handle all possible errors in one place and generate a custom response to return e.g. if all requests return JSON data then you can convert the response to JSON before returning it.
function secureFetch(url, method, data) {
return new Promise((resolve, reject) => {
fetch(url, {
method: method || "GET",
body: JSON.stringify(data),
mode: "cors",
headers: {
"Content-Type": "application/json; charset=utf-8"
}
}).then(response => {
// response only can be ok in range of 2XX
if (response.ok) {
// you can call response.json() here too if you want to return json
resolve(response);
} else {
//handle errors in the way you want to
switch (response.status) {
case 404:
console.log('Object not found');
break;
case 500:
console.log('Internal server error');
break;
default:
console.log('Some error occured');
break;
}
//here you also can thorow custom error too
reject(response);
}
})
.catch(error => {
//it will be invoked mostly for network errors
//do what ever you want to do with error here
console.log(error);
reject(error);
});
});
}
secureFetch('https://jsonplaceholder.typicode./posts/1')
.then(response => response.json())
.then(json => console.log(json))
.catch(error => console.log(error));
secureFetch('https://jsonplaceholder.typicode./posts/100000000')
.then(response => response.json())
.then(json => console.log(json))
.catch(error => console.log(error));Update: You can achieve the same result without creating an extra promise
function secureFetch(url, method, data) {
return fetch(url, {
method: method || "GET",
body: JSON.stringify(data),
mode: "cors",
headers: {
"Content-Type": "application/json; charset=utf-8"
}
}).then(response => {
// Server returned a status code of 2XX
if (response.ok) {
// you can call response.json() here if you want to return the json
return response;
}
// Server returned a status code of 4XX or 5XX
// Throw the response to handle it in the next catch block
throw response;
}).catch(error => {
// It will be invoked for network errors and errors thrown from the then block
// Do what ever you want to do with error here
if (error instanceof Response) {
// Handle error according to the status code
switch (error.status) {
case 404:
// You can also call global notification service here
// to show a notification to the user
// notificationService.information('Object not found');
console.log('Object not found');
break;
case 500:
console.log('Internal server error');
break;
default:
console.log('Some error occurred');
break;
}
} else {
// Handle network errors
console.log('Network error');
console.log(error);
}
// In case you don't want to throw the error just return some value here
// This will be returned to the then block as a resolved promise
// return { success: false };
// Here you can throw a custom error too
// throw new Error('Something went wrong');
throw error;
});
}
secureFetch('https://jsonplaceholder.typicode./posts/1')
.then(response => response.json())
.then(json => console.log(json))
.catch(error => console.log(error));
secureFetch('https://jsonplaceholder.typicode./posts/100000000')
.then(response => response.json())
.then(json => console.log(json))
.catch(error => console.log(error));Here you can handle with promise something like this:
function status(response) {
/*You can handle status here.*/
if (response.status >= 200 && response.status < 300) {
return Promise.resolve(response)
} else {
return Promise.reject(new Error(response.statusText))
}
}
function json(response) {
return response.json()
}
function makeCall(url, method, data) {
return fetch(url, {
method: method || "GET",
body: JSON.stringify(data),
mode: "cors",
headers: {
"Content-Type": "application/json; charset=utf-8"
}
})
.then(status)
.then(json)
.then(function(data) {
console.log('Request succeeded with JSON response', data);
}).catch(function(error) {
console.log('Request failed', error);
});
}
var url = 'http://localhost:4200/profile';
var data = {username: 'example'};
makeCall(url, 'POST', data);