The Project | About Us | Contribute | Donations | License

HOME

Introduction

In modern JavaScript, handling asynchronous operations is crucial for creating responsive and efficient applications. Promises and the async/await syntax provide powerful tools to manage asynchronous code in a more readable and maintainable way.

Promises

What is a Promise?

A Promise is an object representing the eventual completion or failure of an asynchronous operation. It allows you to attach callbacks for handling the result or error.

States of a Promise

A Promise can be in one of three states:

Pending: The initial state, neither fulfilled nor rejected.
Fulfilled: The operation completed successfully.
Rejected: The operation failed.

Creating a Promise

You can create a Promise using the Promise constructor:

const myPromise = new Promise((resolve, reject) => {
  // Asynchronous operation
  let success = true;
  
  if (success) {
    resolve("Operation was successful!");
  } else {
    reject("Operation failed.");
  }
});

Handling Promises

You handle the result of a Promise using the .then() and .catch() methods:

myPromise
  .then((message) => {
    console.log(message); // "Operation was successful!"
  })
  .catch((error) => {
    console.error(error); // "Operation failed."
  });

Chaining Promises

You can chain multiple .then() calls to handle a sequence of asynchronous operations:

myPromise
  .then((message) => {
    console.log(message);
    return anotherAsyncOperation();
  })
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error(error);
  });

Async/Await

What is Async/Await?

async and await are syntactic sugar built on top of Promises. They allow you to write asynchronous code that looks and behaves like synchronous code, making it easier to read and maintain.

Using Async/Await

To use await, you must be inside an async function:

async function fetchData() {
  try {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

fetchData();

Error Handling with Async/Await

You can use try...catch blocks to handle errors in async functions:

async function fetchData() {
  try {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

fetchData();

Combining Promises and Async/Await

You can mix Promises and async/await in your code. For example, you can await a Promise returned by another function:

function fetchData() {
  return fetch('https://api.example.com/data')
    .then(response => response.json());
}

async function processData() {
  try {
    let data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error('Error processing data:', error);
  }
}

processData();

Practical Exercises

Exercise 1: Basic Promise

Create a Promise that resolves with a message "Hello, World!" after 2 seconds.

const helloWorldPromise = new Promise((resolve) => {
  setTimeout(() => {
    resolve("Hello, World!");
  }, 2000);
});

helloWorldPromise.then((message) => {
  console.log(message); // "Hello, World!" after 2 seconds
});

Exercise 2: Fetch Data with Async/Await

Write an async function that fetches data from a public API and logs the result.

async function fetchData() {
  try {
    let response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

fetchData();

Exercise 3: Error Handling

Modify the previous exercise to handle errors using try...catch.

async function fetchData() {
  try {
    let response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

fetchData();

Common Mistakes and Tips

Common Mistakes

Not returning Promises: Ensure that functions return Promises if they are meant to be awaited.
Forgetting await: Always use await when calling asynchronous functions inside async functions.
Improper error handling: Use try...catch blocks to handle errors in async functions.

Tips

Use async/await for better readability and maintainability.
Chain Promises when you need to perform multiple asynchronous operations in sequence.
Always handle errors gracefully to avoid unhandled promise rejections.

Conclusion

Understanding Promises and async/await is essential for modern JavaScript development. They provide a robust way to handle asynchronous operations, making your code more readable and maintainable. Practice using these concepts in your projects to become proficient in managing asynchronous code.

Promises and Async/Await

Introduction

Promises

What is a Promise?

States of a Promise

Creating a Promise

Handling Promises

Chaining Promises

Async/Await

What is Async/Await?

Using Async/Await

Error Handling with Async/Await

Combining Promises and Async/Await

Practical Exercises

Exercise 1: Basic Promise

Exercise 2: Fetch Data with Async/Await

Exercise 3: Error Handling

Common Mistakes and Tips

Common Mistakes

Tips

Conclusion

JavaScript: From Beginner to Advanced

Module 1: Introduction to JavaScript

Module 2: Control Structures

Module 3: Functions

Module 4: Objects and Arrays

Module 5: Advanced Objects and Functions

Module 6: The Document Object Model (DOM)

Module 7: Browser APIs and Advanced Topics

Module 8: Testing and Debugging

Module 9: Performance and Optimization

Module 10: JavaScript Frameworks and Libraries

Module 11: Final Project