Refactoring JS Promises into async functions

13 February 2023

Two key points:

• An async function in JS returns a promise;
• A promise in JS can be awaited with await instead of .then()

So, a piece of code that uses promises with chains of thing().then() can be refactored to use await thing()

Here is a JS example page which mixes promises and await. You can View Source and then download it to your PC to mess around and try changing other things.

If you modify the code to console.log the return value of the getTodos function, you can see that the first time it’s called it returns a Promise<pending> and the second time it returns a Promise<fulfilled>.

Here’s a second example which does the above for you!

Docs:

• Using await within a Promise (SO)
• Rewriting a Promise chain with an async function (MDN)