15: ال async و ال await في javascript

Introduction

In this tutorial, we will explore the concepts of async and await in JavaScript. These features are essential for simplifying asynchronous code and improving readability. By the end of this guide, you'll understand how to use async and await effectively in your JavaScript projects.

Step 1: Understanding Asynchronous JavaScript

JavaScript is single-threaded, meaning it can perform one task at a time. To handle operations like network requests or file reading without blocking the main thread, JavaScript utilizes asynchronous programming.

• Callback Functions: Traditional method for handling asynchronous operations, where functions are passed as arguments to execute once a task is complete.
• Promises: Objects representing the eventual completion (or failure) of an asynchronous operation, allowing for cleaner chaining of operations.

Step 2: Introduction to Async Functions

An async function is a function declared with the async keyword. This allows you to use await within it.

Example of an Async Function

async function fetchData() {
    // Function body
}

• Key Point: An async function automatically returns a promise.

Step 3: Using Await

The await keyword can only be used inside async functions. It pauses the execution of the function until the promise is resolved or rejected.

Example of Using Await

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

• Tip: Always handle errors when using await by wrapping it in a try-catch block.

Step 4: Error Handling with Async/Await

To manage errors effectively, use try-catch blocks around your asynchronous code.

Example of Error Handling

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

• Common Pitfall: Forgetting to handle errors can lead to unhandled promise rejections.

Step 5: Real-world Application

Using async and await can significantly improve the readability of your code, especially when dealing with multiple asynchronous operations.

Example of Multiple Await Calls

async function fetchUserData() {
    try {
        let userResponse = await fetch('https://api.example.com/user');
        let userData = await userResponse.json();
        
        let postsResponse = await fetch(`https://api.example.com/user/${userData.id}/posts`);
        let postsData = await postsResponse.json();
        
        console.log(userData, postsData);
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}

Conclusion

In this tutorial, we covered the fundamentals of async and await in JavaScript, including their syntax, usage, and error handling. By implementing these concepts, you can create more readable and maintainable asynchronous code.

Next Steps

• Practice creating your own async functions with various API calls.
• Consider exploring further topics like Promise.all for handling multiple promises concurrently.