Discussion on: JavaScript's Async + Await in 5 Minutes

[SavagePixie]

Wow! 😎 How much cleaner is that?

Not much, honestly. You're filling the local scope with a bunch of variable names of which you need to keep track. In a simple example, there's hardly any difference. In a complex one, I'd rather not have a bunch of variables there if I can avoid it.

I think that your article could be greatly improved if you used examples of clean code written using promises. As it is now, the proper conclusion to your article is "Well, you can only claim that because you're using bad examples of promises." Arguing for async/await is all good and that, but if you want to make the point that it's clearer than promises, at least use cleanly written code.

I really don't understand why you're wrapping everything in a Promise. Assuming that you're various getIngredient functions are asynchronous (which judging by your async/await examples they are), you don't need to write this:

const getIngredients = () => new Promise((resolve, reject) => {
  getButter()
    .then((butter) => {
      updateBasket(butter)
      return getFlour()
    })
    .then((flour) => {
      updateBasket(flour)
      return getSugar()
    })
    .then((sugar) => {
      updateBasket(sugar)
      return getEggs()
    })
    .then((eggs) => {
      updateBasket(eggs)
      resolve(basket)
    })
})

You can simply do:

const getIngredients = () => getButter()
    .then(updateBasket)
    .then(() => getFlour())
    .then(updateBasket)
    .then(() => getSugar())
    .then(updateBasket)
    .then(() => getEggs())
    .then(updateBasket)

Similarly, you don't need to wrap a Promise.all within another promise. Instead of this:

const getIngredients = () => new Promise((resolve, reject) => {
  Promise.all([
    getButter(),
    getFlour(),
    getSugar(),
    getEggs(),
  ]).then((ingredients) => resolve(ingredients))
})

You can use this:

const getIngredients = () => Promise.all([
    getButter(),
    getFlour(),
    getSugar(),
    getEggs(),
  ])

Which has the advantage of not needing to store the stuff in a variable and return it, as the return will be immediately available in the following then statement.

And again, if you're going to claim that async/await is much cleaner than promises, at the very least don't use code like this:

const bakeACake = () => new Promise((resolve, reject) => {
  getIngredients()
    .then((ingredients) => {
      return mix(ingredients)
    })
    .then((cakeMix) => {
      return cook(cakeMix)
    })
    .then((hotCake) => {
      return stand(hotCake)
    })
   .then((cake) => resolve(cake))
   .catch((e) => reject(e))
})

Because that can easily be written like this:

const bakeACake = () => getIngredients()
    .then(mix)
    .then(cook)
    .then(stand)
    .catch(e => e)