JS Learn area: async module rewrite

[wbamberg]

This PR contains a rewrite of the JS async module. It replaces #12525: this PR contains versions of the 2 articles in that PR, plus three new articles that should complete the module.

I'm marking this draft because it should be merged along with the corresponding update to the learning-area repo over in mdn/learning-area#453, and changes in either PR might mean we need changes in the other one. So let's not merge this until mdn/learning-area#453 is approved (and vice versa).

But it should be ready for review.

Before this PR, the module contained the following articles:

1. General asynchronous programming concepts
2. Introducing asynchronous JavaScript
3. Cooperative asynchronous JavaScript: Timeouts and intervals
4. Handling async operations gracefully with Promises
5. Making asynchronous programming easier with async and await
6. Choosing the right approach

For the reasons given in #12525, I thought I'd try rewriting this module and streamlining it. In this PR we have 5 articles:

1. Introducing asynchronous JavaScript: conceptual introduction to async and why it matters, a bit about events and callbacks, and why they are problematic.
2. How to use promises: how to work with promise-based APIs: promise chains, error handling, promise.all(), async/await. This is the central article: I think if there's one thing we want beginners to take away, it's how to use promise-based APIs and especially how to write promise chains.
3. Implementing a promise-based API: quite short article going through creating promises.
4. Introducing workers: a bit on threads and walk through using a worker.
5. Assessment: Sequencing animations: a practical exercise to reinforce the lesson about using promises.

I'm hoping that this will be more digestible than what was there before and hope that I haven't jettisoned too much stuff.

Note that the links to example code won't work until mdn/learning-area#453 is merged, but you could see them at the wbamberg equivalent, such as https://wbamberg.github.io/learning-area/javascript/asynchronous/sequencing-animations/finished.

[github-actions]

Preview URLs

• https://pr12930.content.dev.mdn.mozit.cloud/en-US/docs/Learn/JavaScript/Asynchronous/Implementing_a_promise-based_API
• https://pr12930.content.dev.mdn.mozit.cloud/en-US/docs/Learn/JavaScript/Asynchronous/Introducing
• https://pr12930.content.dev.mdn.mozit.cloud/en-US/docs/Learn/JavaScript/Asynchronous/Introducing_workers
• https://pr12930.content.dev.mdn.mozit.cloud/en-US/docs/Learn/JavaScript/Asynchronous/Promises
• https://pr12930.content.dev.mdn.mozit.cloud/en-US/docs/Learn/JavaScript/Asynchronous/Sequencing_animations
• https://pr12930.content.dev.mdn.mozit.cloud/en-US/docs/Learn/JavaScript/Asynchronous

Flaws

None! 🎉

External URLs

URL: /en-US/docs/Learn/JavaScript/Asynchronous
Title: Asynchronous JavaScript
on GitHub

No new external URLs

---

URL: /en-US/docs/Learn/JavaScript/Asynchronous/Introducing
Title: Introducing asynchronous JavaScript
on GitHub

No new external URLs

---

URL: /en-US/docs/Learn/JavaScript/Asynchronous/Introducing_workers
Title: Introducing workers
on GitHub

• https://mdn.github.io/learning-area/javascript/asynchronous/workers/finished (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Learn/JavaScript/Asynchronous/Implementing_a_promise-based_API
Title: How to implement a promise-based API
on GitHub

No new external URLs

---

URL: /en-US/docs/Learn/JavaScript/Asynchronous/Sequencing_animations
Title: Sequencing animations
on GitHub

• https://codepen.io/ (1 time) (Note! This may be a new URL 👀)
• https://discourse.mozilla.org/c/mdn/learn (1 time) (Note! This may be a new URL 👀)
• https://glitch.com/ (1 time) (Note! This may be a new URL 👀)
• https://jsfiddle.net/ (1 time) (Note! This may be a new URL 👀)
• https://mdn.github.io/learning-area/javascript/asynchronous/sequencing-animations/finished (1 time) (Note! This may be a new URL 👀)
• https://mdn.github.io/learning-area/javascript/asynchronous/sequencing-animations/start (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Learn/JavaScript/Asynchronous/Promises
Title: How to use promises
on GitHub

• https://example.org (1 time) (Note! This may be a new URL 👀)
• https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json (1 time) (Note! This may be a new URL 👀)
• https://thenewtoys.dev/blog/2021/02/08/lets-talk-about-how-to-talk-about-promises/ (2 times) (Note! This may be a new URL 👀)

(this comment was updated 2022-03-07 18:01:24.349471)

[estelle]

I am a little concerned that the first use of the arrow function is used in the last example only; if people are confused they may think the arrow function makes it asynchronous. Would it be possible to include an arrow function expression elsewhere, much earlier?

[wbamberg]

Is there a particular place where you would like to see them? There are lots of arrow functions earlier in this article, and arrow functions are explained earlier in the course and consistently used throughout. I hope that people taking this course, who haven't the disadvantage of having learned JS before arrow functions, will see them as the default, normal way to write anonymous callback functions.

[Elchi3]

This looks good to me! Great to see how it evolved and got even better from the first PR that you had filed for async.