Skip to content

Instantly share code, notes, and snippets.

@msmfsd
Last active February 4, 2024 17:38
Show Gist options
  • Save msmfsd/fca50ab095b795eb39739e8c4357a808 to your computer and use it in GitHub Desktop.
Save msmfsd/fca50ab095b795eb39739e8c4357a808 to your computer and use it in GitHub Desktop.
Javascript fetch JSON with ES7 Async Await
// 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))
@nataliecardot
Copy link

nataliecardot commented Mar 7, 2021

@michaelnagy or use a fat arrow if you want to be fancy ;)

const fetchAsyncA = async () => 
	await (await fetch('https://api.github.com')).json()

As far as I can tell it's not possible to use the returned data in this case. Let me know if I'm missing something.

@0xlino
Copy link

0xlino commented Sep 29, 2021

Even more fancy :)

import fetch from 'node-fetch'

export default async (...args) => await fetch(...args)

@andreaskuhl
Copy link

andreaskuhl commented Jan 5, 2022

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 ...");

@Proplayz22
Copy link

// 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment