-
-
Save msmfsd/fca50ab095b795eb39739e8c4357a808 to your computer and use it in GitHub Desktop.
// Async/Await requirements: Latest Chrome/FF browser or Babel: https://babeljs.io/docs/plugins/transform-async-to-generator/ | |
// Fetch requirements: Latest Chrome/FF browser or Github fetch polyfill: https://github.com/github/fetch | |
// async function | |
async function fetchAsync () { | |
// await response of fetch call | |
let response = await fetch('https://api.github.com'); | |
// only proceed once promise is resolved | |
let data = await response.json(); | |
// only proceed once second promise is resolved | |
return data; | |
} | |
// trigger async function | |
// log response or catch error of fetch promise | |
fetchAsync() | |
.then(data => console.log(data)) | |
.catch(reason => console.log(reason.message)) |
I want to execute a synchronous json fetch call. The following code (see below). It works in principle, but not in the expected order (not synchronously, but asynchronously again).
My log expectation is 1 2 3 4 5 6 7, but I get 1 2 3 7 4 5 6
How do I meet my expectation?
console.log("1 start");
async function fetchInfo() {
let url = `https://reqres.in/api/products/3`; // only for test
console.log(" 3 fetch");
let response = await fetch(url);
console.log(" 4 response");
let data = await response.json()
console.log(" 5 return");
return data;
}
console.log("2 call fetchInfo()")
fetchInfo()
.then(data => console.log("6 response object: ...", data));
console.log("7 end / more code ...");
// Async/Await requirements: Latest Chrome/FF browser or Babel: https://babeljs.io/docs/plugins/transform-async-to-generator/
// Fetch requirements: Latest Chrome/FF browser or Github fetch polyfill: https://github.com/github/fetch
// async function
async function fetchAsync () {
// await response of fetch call
let response = await fetch('https://api.github.com');
// only proceed once promise is resolved
let data = await response.json();
// only proceed once second promise is resolved
return data;
}
// trigger async function
// log response or catch error of fetch promise
Even more fancy :)