I have an HTTP API that returns JSON data both on success and on failure.
An example failure would look like this:
~ ◆ http get http://localhost:5000/api/isbn/2266202022
HTTP/1.1 400 BAD REQUEST
Content-Length: 171
Content-Type: application/json
Server: TornadoServer/4.0
{
"message": "There was an issue with at least some of the supplied values.",
"payload": {
"isbn": "Could not find match for ISBN."
},
"type": "validation"
}
What I want to achieve in my JavaScript code is something like this:
fetch(url)
.then((resp) => {
if (resp.status >= 200 && resp.status < 300) {
return resp.json();
} else {
// This does not work, since the Promise returned by `json()` is never fulfilled
return Promise.reject(resp.json());
}
})
.catch((error) => {
// Do something with the error object
}
// This does not work, since the Promise returned by `json()` is never fulfilled
return Promise.reject(resp.json());
Well, the resp.json promise will be fulfilled, only Promise.reject doesn't wait for it and immediately rejects with a promise.
I'll assume that you rather want to do the following:
fetch(url).then((resp) => {
let json = resp.json(); // there's always a body
if (resp.status >= 200 && resp.status < 300) {
return json;
} else {
return json.then(Promise.reject.bind(Promise));
}
})
(or, written explicitly)
return json.then(err => {throw err;});
Here's a somewhat cleaner approach that relies on response.ok and makes use of the underlying JSON data instead of the Promise returned by .json().
function myFetchWrapper(url) {
return fetch(url).then(response => {
return response.json().then(json => {
return response.ok ? json : Promise.reject(json);
});
});
}
// This should trigger the .then() with the JSON response,
// since the response is an HTTP 200.
myFetchWrapper('http://api.openweathermap.org/data/2.5/weather?q=Brooklyn,NY').then(console.log.bind(console));
// This should trigger the .catch() with the JSON response,
// since the response is an HTTP 400.
myFetchWrapper('https://content.googleapis.com/youtube/v3/search').catch(console.warn.bind(console));
The solution above from Jeff Posnick is my favourite way of doing it, but the nesting is pretty ugly.
With the newer async/await syntax we can do it in a more synchronous looking way, without the ugly nesting that can quickly become confusing.
async function myFetchWrapper(url) {
const response = await fetch(url);
const json = await response.json();
return response.ok ? json : Promise.reject(json);
}
This works because, an async function always returns a promise and once we have the JSON we can then decide how to return it based on the response status (using response.ok).
You would error handle the same way as you would in Jeff's answer, however you could also use try/catch, an error handling higher order function, or with some modification to prevent the promise rejecting you can use my favourite technique that ensures error handling is enforced as part of the developer experience.
const url = 'http://api.openweathermap.org/data/2.5/weather?q=Brooklyn,NY'
// Example with Promises
myFetchWrapper(url)
.then((res) => ...)
.catch((err) => ...);
// Example with try/catch (presuming wrapped in an async function)
try {
const data = await myFetchWrapper(url);
...
} catch (err) {
throw new Error(err.message);
}
Also worth reading MDN - Checking that the fetch was successful for why we have to do this, essentially a fetch request only rejects with network errors, getting a 404 is not a network error.
I found my solution at MDN:
function fetchAndDecode(url) {
return fetch(url).then(response => {
if(!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
} else {
return response.blob();
}
})
}
let coffee = fetchAndDecode('coffee.jpg');
let tea = fetchAndDecode('tea.jpg');
Promise.any([coffee, tea]).then(value => {
let objectURL = URL.createObjectURL(value);
let image = document.createElement('img');
image.src = objectURL;
document.body.appendChild(image);
})
.catch(e => {
console.log(e.message);
});
Maybe this option can be valid
new Promise((resolve, reject) => {
fetch(url)
.then(async (response) => {
const data = await response.json();
return { statusCode: response.status, body: data };
})
.then((response) => {
if (response.statusCode >= 200 && response.statusCode < 300) {
resolve(response.body);
} else {
reject(response.body);
}
})
});
Related
This question already has answers here:
How do I access previous promise results in a .then() chain?
(17 answers)
Closed 4 months ago.
I need to find a way when the request gets a 403 I can use if before calling JSON with status and data. Only 403 returns HTML
const response = await fetch(
// Fetch info
).then((response) => {
if (!response.ok && response.status === 403) {
// Stuffs
throw new Error('Exception message'); // Raise error to stop the code
}
return response.json();
})
.then((data) => ({
// I need use status code again, and keep the if statement 403 on top.
status: response.status,
data,
}));
If you want to keep with the .then() style you have rather than switch to only using await, you can just move the 2nd .then() to where you have response in scope:
const result = await fetch(...).then((response) => {
if (!response.ok && response.status === 403) {
throw new Error('Exception message');
}
return response.json().then(data => {
status: response.status,
data
});
});
Or, you can just use await and avoid the mixing of await and .then() which is generally less clear and should usually be avoided:
const response = await fetch(...);
if (!response.ok && response.status === 403) {
throw new Error('Exception message');
}
const data = await response.json();
const result = {status: response.status, data};
Note, I've avoided using response in two separate places to mean two different things and used result for the final result and left response as the fetch() response.
response is an argument to your first callback, it's not in scope in the second.
It will be a lot easier if you stop using then (in general, there is hardly ever a good reason to mix async/await and then):
const response = await fetch(/* fetch info */)
if (!response.ok && response.status === 403) {
// Stuffs
throw new Error('Exception message') // Raise error to stop the code
}
const data = await response.json()
const result = {
status: response.status,
data
}
This question already has answers here:
fetch: Reject promise with JSON error object
(5 answers)
Closed last year.
In a locally run Node.js script, this works when status is 200:
// module file
import fetch from "node-fetch";
export const getJSON = () => {
const url = 'https://api.somesite.com/api/v0/etc';
const options = {method: 'GET', headers: {Accept: 'application/json'}};
const request = fetch(url, options)
.then(response => response.json())
.catch(err => console.log("somesite:", err));
return Promise.resolve(request);
};
// execution file
import { getJSON } from './libs/api_requests.mjs';
console.log("func call", await getJSON());
But the fetch also works without triggering the .catch logic when the response status is 4xx or 5xx (see for example this answer).
Execution doesn't break and I actually receive an error message when the function is called as if that would be the correct, normal result - as the output of response.json().
This message is in plain English, something like "error: 'Incorrect path. Please check https://www.somesite.com/api/'".
I would like to preserve/display this error message, only I would like to catch it within the function getJSON in the module file, instead of having to wrap some logic around it at the destination, potentially repeating the same code multiple times everywhere the function is called, instead of dealing with the issue just once at the source.
So I modified the .then clause like this, which also works:
.then(response => { if (response.ok) { // .ok should be status 200 only, I suppose
return response.json();
} else { throw new Error(response.status) }
This now triggers the .catch clause as intended, displaying "Error: 404 [etc]". Except what I would like to throw is the original error message "Incorrect path [etc]" and that I could not do. I tried
.then(response => { if (response.ok) {
return response.json();
} else { throw new Error(response.json()) } // somesite: Error: [object Promise]
.then(response => { if (response.ok) {
return response.json()
} else { throw new Error(Promise.resolve(response.json())) } // somesite: Error: [object Promise]
.then(response => { if (response.ok) {
return response.json()
} else { throw new Error(return response.json()) } // SyntaxError: Unexpected token 'return'
.then(response => { if (response.ok) {
return response.json();
} else { throw new Error(Promise.resolve(request)) } // somesite: Error: [object Promise]
I guess I need to resolve the response.json() promise as if all was ok, but how to do that?
I also had a look at the request object with console.dir(request, { depth: null }) to see if I could extract the error message from there, but I couldn't find it and the object still contained many unexpanded elements like [Function: onerror] or [Function: onclose] for example.
Try response.text() instead of response.json() when the status code is 400 or 500.
In my experience, the error messages are typically returned by the text callback.
See this answer to a similar question.
Edit:
Added the following code, suggested by OP.
.then((response) => {
if (response.ok) {
return response.json();
}
else {
return response.text()
.then((text) => {
throw(text);
// if the error is an object and you just want to display some elements:
throw(JSON.parse(text));
});
}
})
.catch((err) => {
// in case you want to log the error
console.log("somesite: ", err));
return new Error("somesite: " + err);
});
I have two fetch scripts that work great at either or though I can't figure out how to combine them.
This first one allows me to know what the response.status is however even though it somehow knows the server's HTTP response while not having the response body (yeah, asynchronous):
fetch(url).then(function(r)
{
if (r.status != 200) {alert('Error: unable to load preview, HTTP response '+r.status+'.');}
else
{
console.log(r.text());//Promise { <state>: "pending" }, no good.
}
}).catch(function(err) {alert('Error: '+err);});
This second script allows me to access the response.text() though I have no access to the response.status:
fetch(url).then(r => r.text()).then(function(r)
{
console.log(r);//response text.
});
How do I combine the scripts properly so I have access to both the response.status and response.text() after the request has been received?
fetch("https://api.thecatapi.com/v1/images/search").then(function(r)
{
if (r.status != 200) {
alert('Error: unable to load preview, HTTP response '+r.status+'.');
return
}
r.text().then(txt => console.log(txt))
}).catch(function(err) {alert('Error: '+err);});
You can do it like this; Promise need to be resolved before you can access the value
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
You can use Promise.all which allows you to handle many Promise at the same time as fetch return a promise.
const firstFetch = fetch(url);
const secondFetch = fetch(url);
Promise.all([firstFetch, secondFetch]).then(([firstResponse, secondResponse]) => {
// Here you can have access to both firstResponse.status
// And secondResponse.text
})
while #shubhan's code will work, a cleaner approach may be the built in promise chaining, to avoid callback hell which promises strives to solve:
fetch(url)
.then(response => {
if (response.status >= 400) throw { code: response.status }
return response.text() // if you return a promise in a `then` block, the chained `then` block will get the resolved result
})
.then(text => {
console.log(text)
// handle successful event
})
.catch(err => {
// if at any stage of the promise chain, if a promise rejects, or throws, it will be caught by the `catch` block
if (err.code) {
// handle status error
} else {
// handle other errors
}
})
Thx
fetch("https://api.thecatapi.com/v1/images/search").then(function(r)
{
if (r.status != 200) {
alert('Error: unable to load preview, HTTP response '+r.status+'.');
return
}
r.text().then(txt => console.log(txt))
}).catch(function(err) {alert('Error: '+err);});
I´m pretty new to Promises and found many examples here how to access the actual value which is always done with console.log. But my goal is to store the result in a variable and work with it.
getdata = () =>
fetch(
"https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=MSFT&outputsize=full&apikey=demo"
)
.then(response => {
if (response.status === 200) {
return response.json();
} else {
throw new Error("This is an error");
}
})
.then(data => {
console.log(data);
});
getdata();
This code works. Can you help me to rewrite it that the getdata() function allows me to store the result in a variable. Return does not work since I will receive another pending Promise.
You can do it like this:
getdata = () =>
fetch(
"https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=MSFT&outputsize=full&apikey=demo"
).then(response => {
if (response.status === 200) {
return response.json();
} else {
throw new Error("This is an error");
}
});
getdata().then(data => {
//I can do whatever with data
});
Of course you would also want to handle the scenario where the request failed, so you could also chain a .catch(). Alternately, if you have your build process configured for it, you can use async and await so you could do:
try {
const data = await getdata();
} catch(err) {
}
This would need to be in a function marked as async
Well at first we need to declare a variable let's say temp. Then use fetch API to request our query with URL. If server status is 200 then it will return a promise, we need to use then method by passing any argument (res, response, r anything...) and then a fat arrow function (=>) so that we can make the response as json format. After then we need to use another then method to return the json output and assign the value to our declared temp variable.
But if there is any error like 500, 400, 404 server error we need to use catch method with err argument and console it out.
let temp;
fetch('https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=MSFT&outputsize=full&apikey=demo')
.then(res => res.json())
.then(data => temp = data)
.catch(err => console.log(err));
I am using fetch api for fetching an URL that might return:
Response : status = 200, json body = {'user': 'abc', 'id': 1}
or
Response : status = 400 , json body = {'reason': 'some reason'}
or
Response : status = 400 , json body = {'reason': 'some other reason'}
I want to make a separate function request() that I use from various parts of my code as follows:
request('http://api.example.com/').then(
// status 200 comes here
data => // do something with data.id, data.user
).catch(
// status 400, 500 comes here
error => // here error.reason will give me further info, i also want to know whether status was 400 or 500 etc
)
I am unable to do the split between 200 and 400,500 (i have tried by throwing an error). When I throw an error, I am finding it hard to still extract the JSON body (to use for error.reason).
My current code is as follows:
import 'whatwg-fetch';
/**
* Requests a URL, returning a promise
*/
export default function request(url, options={}) {
console.log('sending api request, url = ' + url)
return fetch(url, options)
.then(checkStatus)
.then(parseJSON)
.then((data) => ({data}))
.catch((err) => ({err}));
}
function checkStatus(response) {
if (response.status >= 200 && response.status < 300) {
return response;
}
const error = new Error(response.statusText);
error.response = response;
throw error;
}
function parseJSON(response) {
return response.json(); // json() is a promise itself
}
I have tried to solve this by doing as follows, by inverting the order of .then() calls, but does not work
export default function request(url, options) {
return fetch(url, options)
.then(parseJSON) // note that now first calling parseJSON to get not just JSON but also status.
.then(checkStatus) // i.e. Inverted order of the two functions from before
.then((data) => ({data}))
.catch((err) => ({err}));
}
function checkStatus({data, status}) {
if (status >= 200 && status < 300) {
return data;
}
else {
// const error = new Error(response.statusText);
const error = new Error("Something went wrong");
// error.response = response;
error.data = data;
throw error;
}
}
function parseJSON(response) {
let jsonBody
response.json().then(json => {
jsonBody = json // this does not help, i thought it will make jsonBody fill up, but seems its in a diff thread
})
return {
data: jsonBody,
status: response.status // my aim is to send a whole dict with status and data to send it to checkStatus, but this does not work
}
}
response.json() returns an asynchronous result. You are not returning the object at parseJSON from within .then() chained to response.json(). To correct that issue you can return response.json() promise at parseJSON call and return object containing data and status from within .then() chained to response.json()
function parseJSON(response) {
return response.json().then(json => {
return {
data: json,
status: response.status
}
})
}
Here's slightly different approach: With a one-liner I create a response-like promise with ok, status and json-as-object (not a promise), then I decide what to do with this object. Generally I reject with response if response.ok is false, otherwise I resolve with only the json-data. Network errors/json-parse-errors are rejected as usual.
fetch(url, options)
.then(r => r.json().then(json => ({ok: r.ok, status: r.status, json})))
.then( r => r.ok ? r.json: Promise.reject(r))