A Complete Guide to JavaScript Asynchronous Programming: Promise and Asynchronous/Await

Why do we need asynchronous programming

JavaScript is a single threaded language, and time-consuming operations such as network requests and file read/write must be executed asynchronously, otherwise the interface will freeze.

The problem of callback hell

Multi layer nested callback code is difficult to maintain.

Promise Three States

• pending: In progress
• fulfilled: Success
• rejected: Failed

fetch('/api/user').then(res => res.json()).then(data => console.log(data)).catch(err => console.error(err));

Asynchronous/Await syntax sugar

ES2017 introduces asynchronous code that looks like synchronization:

async function loadUser() {

parallel execution

Multiple independent requests are parallelized using Promise.all.

Common Pitfalls

• Forgetting await results in obtaining Promise object instead of result
• Incorrect use of await in loop leads to serial execution
• Missing try/catch leads to uncaught exceptions