ال async / await في الجافاسكريبت | async / await in javascript

Introduction

In this tutorial, we will explore the async and await keywords in JavaScript, which simplify working with promises. Understanding these concepts is essential for modern JavaScript development, as they make asynchronous code easier to read and maintain. If you're new to promises, consider reviewing an introductory lesson on them before diving in.

Step 1: Understanding Promises

Before using async and await, it's crucial to understand what promises are.

• A promise is an object that represents the eventual completion or failure of an asynchronous operation.
• Promises have three states:
  • Pending: The initial state, neither fulfilled nor rejected.
  • Fulfilled: The operation completed successfully.
  • Rejected: The operation failed.

Practical Tip

If you haven't already, check out a detailed explanation of promises here.

Step 2: Declaring an Async Function

To use await, you must define an asynchronous function using the async keyword.

1. Start with the async keyword before the function declaration.
2. Inside the function, you can use await to pause execution until a promise is resolved.

Example

async function fetchData() {
    // code here
}

Step 3: Using Await

Within an async function, you can use await to wait for a promise to resolve.

1. Place await before the promise you want to resolve.
2. The code execution will pause at this point until the promise is fulfilled.

Example

async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
}

Step 4: Handling Errors with Try/Catch

When working with asynchronous code, errors can occur. It's essential to handle these errors properly.

1. Wrap your await calls within a try block.
2. Use a catch block to handle any errors that may arise.

Example

async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('There has been a problem with your fetch operation:', error);
    }
}

Step 5: Chaining Async Functions

You can chain multiple asynchronous functions for more complex operations.

1. Define multiple async functions.
2. Call one function after another using await.

Example

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

async function processData() {
    const data = await fetchData();
    console.log(data);
}

Conclusion

The async and await keywords greatly enhance the readability and maintainability of asynchronous code in JavaScript. By understanding how to declare async functions, use await, and handle errors effectively, you'll be better equipped to manage asynchronous operations in your applications.

As a next step, experiment with integrating async and await into your own JavaScript projects, and consider exploring additional resources to deepen your understanding of asynchronous programming.