A Guide to JavaScript Promises

A whistle-stop tour of all things asynchronous in JavaScript: from callback hell to async/await

Bret Cameron
Aug 7, 2019 · 5 min read

Callback Functions, Try and Catch

func1(function(result) {
func2(result, function(newResult) {
func3(newResult, function(finalResult) {
func4(newResult, function(finalResult) {
console.log(finalResult);
}, failureCallback);
}, failureCallback);
}, failureCallback);
}, failureCallback);
try {
asyncFunction();
}
catch (err) {
console.error(err);
}
try {
func1();
try {
func2();
try {
func3();
} catch {
failureFunc1();
}
} catch {
failureFunc2();
}
} catch {
failureFunc3();
}

Promises, Then and Catch

const foo = new Promise(function(resolve, reject) {
setTimeout(function() {
resolve('bar');
}, 3000);
});

Then and Catch

foo
.then(result => console.log(result)
.catch(err => console.error(err);
fetch(myRequest)
.then(response => response.json())
.then(data => {
processData(data);
});

Async and Await

const foo = async () => {
const result = await new Promise(function(resolve, reject) {
setTimeout(function() {
resolve('bar');
}, 3000)
});
console.log(result);
};
const getUserData = async (user) => {
let response = await fetch(`https://api.github.com/users/${name}`);
let data = await response.json();
return data;
}

Turning Synchronous Functions Asynchronous

function sum(arr) {
return arr.reduce((x, y) => x + y);
};
async function sum(arr) {
return arr.reduce((x, y) => x + y);
};
const asyncSum = (arr) => {
return new Promise((resolve, reject) => {
resolve(arr.reduce((x, y) => x + y))
});
};
asyncSum(veryLargeArray)
.then(result => {
this.setState({ sum: result });
});
.catch(err => console.log(err));
(async () => {
const result = await asyncSum(veryLargeArray);
this.setState({ sum: result });
})()

Bonus: Asynchronous Redux


JavaScript In Plain English

New articles every day.

Sign up for The Best Bits

By JavaScript In Plain English

A weekly round up of the best content from In Plain English, handpicked by our Founder @sunilsandhu Take a look

Create a free Medium account to get The Best Bits in your inbox.

Bret Cameron

Written by

Writer and developer based in London. On Medium, I write about JavaScript and web development 💻

JavaScript In Plain English

New articles every day.

Bret Cameron

Written by

Writer and developer based in London. On Medium, I write about JavaScript and web development 💻

JavaScript In Plain English

New articles every day.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store