Async/Await in JavaScript

Async/await is a syntax for writing asynchronous code in JavaScript that makes it easier to work with Promises. In this tutorial, we will learn how to use async/await to write cleaner, more readable asynchronous code.

Async Functions

An async function is a function that is declared with the async keyword. It can contain one or more await expressions, which pause the execution of the function until a Promise is resolved.

Here is an example of an async function that returns a Promise:

async function getData() {
  const response = await fetch('https://example.com/data');
  const data = await response.json();
  return data;
}

This function uses the fetch function to make an HTTP request to https://example.com/data, and then it parses the response as JSON. The await expressions pause the execution of the function until the Promises returned by fetch and response.json are resolved.

Await Expressions

An await expression can only be used inside an async function. It pauses the execution of the async function until a Promise is resolved, and then it returns the resolved value.

Here is an example of an await expression:

async function getData() {
  const response = await fetch('https://example.com/data');
  const data = await response.json();
  return data;
}

const data = await getData();
console.log(data); // the resolved value of the getData() Promise

In this example, the await expression in the getData function pauses the execution of the function until the fetch Promise is resolved. The await expression in the main program then pauses the execution of the main program until the getData Promise is resolved.

Handling Errors

If a Promise is rejected while an async function is executing, an error will be thrown. You can catch this error using a try/catch block:

async function getData() {
  try {
    const response = await fetch('https://example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

const data = await getData();
console.log(data); // undefined if the Promise is rejected

In this example, the getData function will catch any errors that occur while it is executing and log them to the console. If an error occurs, the getData Promise will be rejected and the await expression in the main program will throw an error.

Full Example

Here is the rest of the full example that demonstrates how to use async/await to make an HTTP request and parse the response:

async function getData() {
  try {
    const response = await fetch('https://example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

async function main() {
  const data = await getData();
  console.log(data);
}

main();

In this example, the main function is an async function that calls the getData function and logs the returned data to the console. The getData function uses the fetch function to make an HTTP request to https://example.com/data, and then it parses the response as JSON. If an error occurs while the getData function is executing, it will be caught and logged to the console.

I hope this tutorial helps you understand how to use async/await functions in JavaScript. Let me know if you have any questions!

That's it.