Note: This article was originally published on October 10, 2017. Some information may be outdated.

async andawait landed in ES2017, letting developers write asynchronous code that reads like synchronous steps.

Before: Promise chain

functionfetchUser(id){returnfetch(`/api/users/${id}`).then(res=>res.json()).then(data=>{console.log('User:',data);}).catch(err=>console.error(err));}

Nested.then() calls grow quickly and push error handling to the end.

After: async / await

asyncfunctionfetchUser(id){try{constres=awaitfetch(`/api/users/${id}`);constdata=awaitres.json();console.log('User:',data);}catch(err){console.error(err);}}

How it works

• async marks the function, returning a promise automatically.
• await pauses execution until the promise resolves, yielding the result.
• try/catch handles both network errors and thrown exceptions.

Sequential vs parallel

// sequentialawaitstepOne();awaitstepTwo();// parallelconst[a,b]=awaitPromise.all([stepOne(),stepTwo()]);

UsePromise.all to start tasks together, then await their combined result.

Tips

• Always wrap awaited code intry/catch for proper error handling.
• Combine withPromise.allSettled for bulk operations where some may fail.
• Keepasync functions small; extract chunks to maintain readability.

Async/await became mainstream in 2017, replacing many callback and promise chains with clear top‑to‑bottom control flow.