|
| 1 | +- [Understanding Asynchronous JavaScript](#understanding-asynchronous-javascript) |
| 2 | + - [Callbacks](#callbacks) |
| 3 | + - [Synchronous Callbacks](#synchronous-callbacks) |
| 4 | + - [Asynchronous Callbacks](#asynchronous-callbacks) |
| 5 | + - [Promises](#promises) |
| 6 | + - [`.then()` promise handler](#then-promise-handler) |
| 7 | + - [`.catch()` promise handler](#catch-promise-handler) |
| 8 | + - [`.finally()` promise handler](#finally-promise-handler) |
| 9 | + - [Promise Chaining ⛓️](#promise-chaining-️) |
| 10 | + - [Async/Await](#asyncawait) |
| 11 | + - [`async`](#async) |
| 12 | + - [`await`](#await) |
| 13 | + - [Error Handling `async`/`await`](#error-handling-asyncawait) |
| 14 | + |
1 | 15 | # Understanding Asynchronous JavaScript |
2 | 16 |
|
3 | 17 | JavaScript is single-threaded programming language which means only one thing can happen at a time. This helps us to simplify our code but this also means that we can't perform long operations such as reading from a file without blocking the main thread. That's where asynchronous JavaScript helps us. |
@@ -333,7 +347,7 @@ fs.promises |
333 | 347 | }); |
334 | 348 | ``` |
335 | 349 | |
336 | | -## ⛓️ Promise Chaining |
| 350 | +### Promise Chaining ⛓️ |
337 | 351 | |
338 | 352 | The promise handlers `then`, `catch` and `finally` helps us to handle any number of asynchronous operations that depend on each other. We can chain the handler methods to pass a value or error from one promise to another. |
339 | 353 | |
@@ -454,3 +468,72 @@ getUser |
454 | 468 | ``` |
455 | 469 | |
456 | 470 | To summarize, the `.then()` method allows us to handle the result of a Promise and perform additional operations based on the result. We can return another promise, a value or throw an error, depending upon the situation. |
| 471 | + |
| 472 | +## Async/Await |
| 473 | + |
| 474 | +Async/Await is the most straightforward way to deal with asyanchronous operations in JavaScript. JavaScript provides us with two keywords: `async` and `await` that makes the use of promises musch easier. In simple terms, we use `async` to return a promise and use `await` to wait and handle a promise. This helps us to write cleaner and efficinet code. |
| 475 | + |
| 476 | +Let us consider a program that gets data from the server, process it and returns a promise. |
| 477 | + |
| 478 | +```js |
| 479 | +function getUser(name) { |
| 480 | + return server.registeredUsers().then((user) => { |
| 481 | + const verified = user.map((person) => person.name); |
| 482 | + return verified; |
| 483 | + }); |
| 484 | +} |
| 485 | +``` |
| 486 | + |
| 487 | +Let's rewrite this program using `async` and `await`. |
| 488 | + |
| 489 | +```js |
| 490 | +async function getUser(name) { |
| 491 | + const user = await server.registeredUsers(); |
| 492 | + const verified = user.map((person) => person.name); |
| 493 | + return verified; |
| 494 | +} |
| 495 | +``` |
| 496 | + |
| 497 | +### `async` |
| 498 | + |
| 499 | +The `async` keyword lets the JavaScript engine know that we are declaring an asynchronous function. When a function is marked as `async`, it returns a `Promise`. Async functions are just the syntatic sugar for `Promises`. |
| 500 | + |
| 501 | +```js |
| 502 | +const myAsyncFucntion = async () => { |
| 503 | + // perform asynchronous tasks and return a Promise |
| 504 | +}; |
| 505 | +``` |
| 506 | + |
| 507 | +```js |
| 508 | +myArray.forEach(async (item) => { |
| 509 | + // fo something asynchronous for each item in myArray |
| 510 | +}); |
| 511 | +``` |
| 512 | + |
| 513 | +### `await` |
| 514 | + |
| 515 | +`await` keyword tells the JavaScript engine to wait for asynchronus operations to complete before continuing the function. The `await` keyword is used to get a value from a function where we would normally use `.then()` promise handler. Instead of calling the `.then()` method, we can simply assign a variable to the result using `await`. |
| 516 | + |
| 517 | +### Error Handling `async`/`await` |
| 518 | + |
| 519 | +We know that the Promsies have `catch()` method for handling rejected promises. Since, `async` functions just return a promise, we can simply append a `catch()` method at the end of function call. |
| 520 | + |
| 521 | +```js |
| 522 | +myAsyncFunction().catch((error) => { |
| 523 | + console.log(error); |
| 524 | +}); |
| 525 | +``` |
| 526 | + |
| 527 | +We can also use the `try`/`catch` block to handle the error directly inside the `async` function. |
| 528 | + |
| 529 | +```js |
| 530 | +async function getUser(name) { |
| 531 | + try { |
| 532 | + const user = await server.registeredUsers(); |
| 533 | + const verified = user.map((person) => person.name); |
| 534 | + return verified; |
| 535 | + } catch (error) { |
| 536 | + // handler the error here |
| 537 | + } |
| 538 | +} |
| 539 | +``` |
0 commit comments