Notes on Javascript async and await

-
MDN has a very good page on async (and await).

Having read them the MDN page plus a bunch of other tutorials, here are my key takeaways:

In general:
  1. async and await are just a nicer syntax for working with promises. So learn promises. Understand promises. And then use async and await to make your promise-using code look nicer.

About async:
  1. Putting async in front of a function definition allows you to use await inside that function.
  2. Putting async in front of a function definition also wraps the function's return value in a promise, if the return value wasn't a promise already. So if my function gets data via a promise and then extracts and transforms the data before returning it, I can just return my transformed data and let async magically re-promise-ify the data for me. :-)
About await:
  1. await lets me use functions that return promises, but write code that looks synchronous, i.e.the code looks as if the function that returns a promise was an old fashion blocking function which returned a normal value.
  2. Not obvious in every tutorial is that... await works on promises, not functions. It doesn't really have anything to do with functions.
  3. await does two things: 1) lets JavaScript do other work until the promise resolves, and 2) unwraps the value which was inside the promise.
  4. You can get a promise from a function and await on it later, to extract the value. This lets you do other stuff before you start awaiting. You can call multiple functions and get multiple promises, and then start awaiting on those promises.
  5. To write a function which will be used with await, just return a promise. That's all. Your function doesn't have to know anything about async/await. It could have been written before async and await existed.
Here are some console games to illustrate a few of the less tutorial-ed points above:

async wraps your function's return value in a promise:
> async function foo() {return 'Foo!'}
> let doo = foo()
> console.log(doo)
>>>> Promise {<resolved>: "Foo!"}

await (waits for and) unwraps promises:
> let goo = await doo
> console.log(goo)
>>>> Foo!

Error handling with async and await:
  1. While await converts a promise into a value, await converts a failing promise into a throw. So you can handle it with try-catch instead of the promise-y way.
  2. At the top level, i.e. not inside an async function so you can't use await,  you can use .catch(...) on the promise returned by an await function.

Comments

Post a Comment

Popular posts from this blog

Callback, Promise, Observable, and Doughnuts

-
This is the story of Jerry JavaSript's Automated Slow Doughnut Shop. One day, I wanted a doughnut. So I rode my bike to the automated slow doughnut shop, where they have a slow doughnut machine. You put in a dollar. And then the machine mixes batter, heats the fat, drops the batter into the fat, lifts it out on a linked metal conveyor belt, dusts it with sugar, and drops it into your waiting hands. Once I get my doughnut, I can eat it in the usual manner. But from the time I put in my dollar until the time I receive my doughnut, I am blocked. Fortunately, the slow doughnut machine has a slot labeled, "Insert callback  here". This is great. I code up a function eatDoughnut(doughnut) . I can reference my teeth,  esophagus, stomach, and so on, because they are mine and I know all about them. And then I slip my   eatDoughnut(doughnut)  function  into the slot and get on my bike and ride  to the office while the slow doughnut machine is still mixing batter. When the
Read more

Learn grid and grid-template-areas FIRST!!!

-
If you're starting to learn web design, you will see hundreds of tutorials about floats clear-fix and positioning and other infinitely painful details on how to actually get HTML and CSS to lay things out in seemingly normal and obvious ways. You'll probably have to learn some of that. But don't learn it first! Instead , read this  https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids And then read this  https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas and a longer tutorial here  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas Then lay out your web pages as if layout was something we were actually allowed to do. (And then go back and learn some of the painful stuff later. Or if enough time has passed, maybe you won't have to.)
Read more

The Day TDD Started Working for Me

-
I've always agreed that Test Driven Development was a good idea and I should be doing it. But it's hard to do on top of learning new tools. And it's hard to do for GUIs. So it never quite happened. However, after I worked with React and Redux a bit, and after doing a couple hello-world tests with Jest, it all fit together and actually made coding easier and more fun. These were the parts that came together to make it work: Jest: Jest is included with create-react-app and is stupid-easy to start using. The Redux reducer, or functions used in the reducer, have to be pure functions and are therefore stupid-easy to test. I pulled some functions out of Redux Container mapStateToProps. These are also pure functions. I also decided that the outputs from mapStateToProps had to have the same structure, and even use most of the same names, as the container component and all of it's child components. In other words, you could dump the data coming out of mapStateToProps a
Read more