Introducing Async/Await

Wondering what async/await is and how and when to use it? In this article, I will answer these questions as simply as I can.

Background:
Async/await is simply a modern way of handling asynchronous operations in JavaScript, making it easier to work with Promises. 

Asynchronous operations are tasks that take some time to complete, like fetching data from an API. In JavaScript, there are other ways to handle asynchronous operations, such as:

  • Callbacks - A callback is a function passed as an argument to another function, which is then executed after the completion of an asynchronous operation. Callbacks were the primary method for handling asynchronous operations in earlier versions of JavaScript. However, they can lead to issues like "callback hell" when dealing with multiple nested asynchronous operations, making the code difficult to read and maintain.
  • Promises - Promises are a more modern approach to handling asynchronous operations. A Promise represents the eventual result of an asynchronous operation and has three states: pending, fulfilled (resolved), and rejected. Promises can be chained together using .then() and .catch() methods, making the code more readable and easier to maintain than callbacks.
You can find many examples of Callbacks and Promises if you do some research.

Async/await is built on top of Promises and further simplifies the handling of asynchronous operations by making the code even more readable and easier to maintain.

Putting async/await into Action:
When a function is marked as async,  it automatically returns a Promise. If an async function contains an await  expression, then this promise-returning function behaves as though it is synchronous by suspending execution until the returned promise is fulfilled or rejected. The resolved value of the promise is treated as the return value of the await expression. The await keyword is only valid inside async functions within regular JavaScript code, although it can be used on its own, in other situations. 

So there are three parts to an async function:

  • async : Tells the function it can work with Promises.
  • await : Pauses the function to wait for a Promise to finish.
  • return : Gives a result for the Promise created by the async function. 
Below is an example of an async/await function that I used to delete a piece of data for a CRUD project that was written in TypeScript.


Remember that these explanations are simplified, and there's more to learn about async  functions, await , and Promises as you progress in your coding journey. Please visit the MDN Web Docs on this topic if you are interested in learning more.

In addition, please share your thoughts, experiences, or questions in the comment section so I can also learn from you.


Conclusion:
In conclusion, async/await is a powerful tool that simplifies asynchronous programming in JavaScript. It makes your code more readable and easier to maintain, especially when compared to older techniques like callbacks. As you continue your coding journey, don't hesitate to explore and experiment with async/await  to better understand its capabilities and improve your skills. Happy coding!

Comments

Post a Comment

Popular posts from this blog

A Beginner's Guide to Node.js

If you are familiar with JavaScript and are wondering what Node.js is and why it's become such a popular tool among developers, this beginner-friendly blog post will introduce Node.js, explain how it works, and provide a simple example to help you understand its power and potential. Background: Node.js is an open-source, cross-platform runtime environment that allows developers to execute JavaScript code on the server side, outside of the browser. Node.js was created by Ryan Dahl in 2009 to address the limitations of using JavaScript solely in web browsers. Before Node.js, JavaScript was mainly used for client-side scripting, where the code runs in a user's browser. With Node.js, developers can now use JavaScript for both client-side and server-side development, making it a versatile and powerful language for building full-stack applications. How Node.js Works: Node was conceived to make asynchronous programming easy and convenient. This means that Node.js can handle multiple ...
Read more

Building a Command-Line To-Do App in Rust

In this blog post, I will create a simple command-line To-Do app in Rust. I will go through the code step-by-step, explaining how each part works. By the end, you will have a basic understanding of Rust and a functioning To-Do app.  Here is the repo for this simple To-Do app. Prerequisites: Basic Rust knowledge Rust installed on your computer Getting Started: First, let's create a new Rust project: cargo new todo_app cd todo_app Now open src/main.rs in your favorite text editor. Importing Necessary Modules: We'll start by importing the necessary modules from the Rust standard library: use std::io::{stdin, stdout, Write}; use std::collections::HashMap; Here's what each module does: std::io::stdin : Reads user input from the standard input stream (usually the keyboard). std::io::stdout : Accesses the standard output stream (usually the console). std::io::Write : Provides the flush() method for output streams, including stdout. std::collections::HashMap : Implements the ...
Read more