How to Use Fetch with Async Await vs Promise Chaining

Fetch returns a promise and can be used either with promise chaining or with async/await. In both cases, fetch is returning the same result, but how the promise is handled is different depending on which method you choose.

I originally learned how to use fetch using promise chaining (.then), however I recently converted to using async/await instead because I find it more elegant to both read and write.

Async Keyword

Add the async keyword before the function arguments as you can see in the second example. The async keyword ensures that the function will always return a promise and wraps non-promises in it. It also allows us to use our next keyword, await, in the function.

Await Keyword

You can see the await keyword being used twice in the second example on lines 2 and 9. The await keyword can only be used inside an async function. By using the await keyword before a promise, JavaScript function execution is paused until the promise has settled and then resumes the execution with the promise as the result.

Basically, anywhere you were calling a .then, you can instead use the await keyword. Rather than having the thing that comes back from a promise as a callback argument (response and newBag in the first example below), instead save it as a regular variable.

Promise Chaining Example

Refactor with Async/Await