async & await

Asynchronous programming in JavaScript can be a bit challenging, especially when dealing with code that depends on network requests or other long-running tasks. However, the introduction of the async and await keywords in ES2017 (also known as ES8) has greatly simplified asynchronous programming in JavaScript. In this article, we'll explore what async and await are, and how to use them.

What are async and await?
async and await are two new keywords introduced in ES2017 that simplify asynchronous programming in JavaScript. The

• async keyword is used to define an asynchronous function, which returns a promise that is resolved with the function's return value.

• await keyword is used to pause the execution of an async function until a promise is resolved.

An async function is defined like this:

async function myAsyncFunction() {
  // Code here
}

Inside an async function, you can use the await keyword to pause the function execution until a promise is resolved. The syntax for using await looks like this:

let result = await myPromise;

myPromise is a promise that you want to wait for, and result is the value that the promise resolves to.

Fetching data from an API

Let's take a look at an example that demonstrates how to use async and await to fetch data from an API.

Suppose we have an API endpoint that returns a list of users. The endpoint is available at https://jsonplaceholder.typicode.com/users. We want to fetch this data and log the names of the users to the console.

Here's how we can do it using async and await:

async function getUsers() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    const data = await response.json();
    const names = data.map(user => user.name);
    console.log(names);
  } catch (error) {
    console.error(error);
  }
}

getUsers();

Here, we define an async function called getUsers that fetches the data from the API using the fetch function. We then use the await keyword to pause the function execution until the data is fetched and parsed as JSON using the json method of the response object.

Once we have the data as an array of user objects, we use the map method to extract the name property of each user, and then log the resulting array of names to the console.

In case there's an error during the fetch or parsing process, we handle it using a try-catch block.

Finally, we call the getUsers function to start the asynchronous operation.

*Repl as Example : *

1. https://replit.com/@CodeOf1/asyncawait
2. https://replit.com/@CodeOf1/asyncawait02