I'm trying to work with async await and fetching data using the fetch api
My problem is, I just don't quite understand how I really get the answer from the server and not the status of the promise. I get the following in the console
Promise {<pending>}
-------------------------------
{locale: "en"}
but what I rather expect is the server response which should be "locale: en".
my code:
const locale = getLocale();
console.log(locale) // here I want to have "locale: en" as a output
async function fetchLocale() {
return await fetch('/get-language', {
headers: {
'Accept': 'application/json'
},
method: 'GET',
}).then(response => {
if (response.ok) {
return response.json()
}
return Promise.reject(Error('error'))
}).catch(error => {
return Promise.reject(Error(error.message))
})
}
async function getLocale() {
return await fetchLocale();
}
The goal I want to archive is, to return this "locale: en" response and store it in the "locale" const at the beginning of my code example.
KR
I'm trying to work with async await and fetching data using the fetch api
My problem is, I just don't quite understand how I really get the answer from the server and not the status of the promise. I get the following in the console
Promise {<pending>}
-------------------------------
{locale: "en"}
but what I rather expect is the server response which should be "locale: en".
my code:
const locale = getLocale();
console.log(locale) // here I want to have "locale: en" as a output
async function fetchLocale() {
return await fetch('/get-language', {
headers: {
'Accept': 'application/json'
},
method: 'GET',
}).then(response => {
if (response.ok) {
return response.json()
}
return Promise.reject(Error('error'))
}).catch(error => {
return Promise.reject(Error(error.message))
})
}
async function getLocale() {
return await fetchLocale();
}
The goal I want to archive is, to return this "locale: en" response and store it in the "locale" const at the beginning of my code example.
KR
Share Improve this question edited Jan 3, 2020 at 17:43 JuniorDev asked Jan 3, 2020 at 17:25 JuniorDevJuniorDev 1621 gold badge3 silver badges15 bronze badges 10- Oh - and I'm using plain JS – JuniorDev Commented Jan 3, 2020 at 17:26
-
1
your
getLocale()function does not return anything. – Pointy Commented Jan 3, 2020 at 17:27 -
1
Replace
console.log(response)withreturn response, andfetchLocale()withgetLocale()– user5734311 Commented Jan 3, 2020 at 17:29 -
1
... and then understand that what you're getting back is a Promise, so you still won't directly get the locale. You'll need to add a
.then()callback or else wrap the call in another immediately invokedasyncfunction wrapper. – Pointy Commented Jan 3, 2020 at 17:32 -
1
@JuniorDev please see my or TKoL's answers. You cannot bring async results into synchronous context like the top level of your file, it just isn't possible. You need to consume the function with either
.then()orawaitin an async function. – Klaycon Commented Jan 3, 2020 at 17:44
2 Answers
Reset to default 10Your function should look more like this:
async function getLocale() {
let response = await fetch('/get-language', {
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
method: 'GET',
});
// you can check for response.ok here, and literally just throw an error if you want
return await response.json();
}
And you can consume the result of that in an async function using await
const locale = await getLocale();
console.log(locale);
or by using the promise methods
getLocale().then(function(locale){
console.log(locale);
})
To get the value a Promise resolves with and not the promise itself, use .then() or await. Note that both require a callback or asynchronous context as it's simply not possible to bring this asynchronous result to a synchronous context such as the top level of your file.
getLocale().then(locale => {
console.log(locale);
//locale is only valid here
});