I need to request data from my REST server to populate my UI (frontend). In doing so, I need to request some data from my and other servers. One such request is to get a list of states (provinces). I use fetch() and .json() to do this.
I see there are a few questions on SO addressing this issue mentioned below (here, here and a few more), however attempting their solutions/suggestions did not solve my problem.
e.g.
fetch("http://localhost:3443/app/location/provinces").then(e => e.json()).then(console.log);
Naturally fetch()
being a network operation returns a promise, or I can use it with await
& async
. Also, .json()
is also a promise. Since then()
is called by resolve(data) to proceed to the next then() and .catch(error)
processes reject(error), the request above should make sense.
Problem:
However, on each call to:
fetch("http://localhost:3443/app/location/provinces")
.then(e => e.json())
.then(console.log)
.catch(console.warn);
I get a Promise {<pending>}
. Since it is the case, I tried the same with an async/await
impl and receive the same "error":
(async () => {
let l = await fetch("http://localhost:3443/app/location/provinces");
console.log(l);
})();
What am I doing wrong/missing?