Skip to content

Instantly share code, notes, and snippets.

@StevenACoffman
Last active November 9, 2017 13:09
Show Gist options
  • Save StevenACoffman/3a1fb126cb982841ae47ead9ce71870d to your computer and use it in GitHub Desktop.
Save StevenACoffman/3a1fb126cb982841ae47ead9ce71870d to your computer and use it in GitHub Desktop.
Async Await in 7 seconds

Async / Await in 7 seconds

by Wassim Chegham (@manekinekko)

From this awesome animation, originally from this tweet

Callbacks (continuation passing style)

getData( a => {
	getMoreData(a, b => {
		getMoreData(b, c => {
			getMoreData(c, d => {
				getMoreData(d,e => {
					console.log(e);
				});
			});
		});
	});
});

Promises (with anonymous functions argument)

getData()
.then(a => getMoreData(a))
.then(b => getMoreData(b))
.then(c => getMoreData(c))
.then(d => getMoreData(d))
.then(e => getMoreData(e));

Promises (with named function argument)

getData()
.then(getMoreData)
.then(getMoreData)
.then(getMoreData)
.then(getMoreData)
.then(getMoreData);

Async Await

(async () => {
	const a = await getData();
	const b = await getMoreData(a);
	const c = await getMoreData(b);
	const d = await getMoreData(c);
	const e = await getMoreData(d);
	console.log(e);
})();

Async Await with Exception Handling

(async () => {
	try {
		const a = await getData();
		const b = await getMoreData(a);
		const c = await getMoreData(b);
		const d = await getMoreData(c);
		const e = await getMoreData(d);
		console.log(e);
	}
	catch(me) {
		// if you can
	}
})();
@manekinekko
Copy link

This is awesome ;)

@ashee
Copy link

ashee commented Nov 9, 2017

Thanks for sharing. Great article here - https://jakearchibald.com/2017/async-iterators-and-generators/

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