My React Journey: Day 9

What I Learned Today:

1. Asynchronous JavaScript:

Definition: Asynchronous programming allows JavaScript to perform tasks without waiting for a previous task to complete.
Use Case: Making API calls or other time-consuming operations.
Benefit: Improves efficiency by enabling other tasks to run while waiting for a response.

1. Callbacks:

• Definition: A callback is a function passed as an argument to another function, executed later when required.
• Challenge: Nested callbacks create callback hell, making the code hard to read and maintain.
• Solution: Promises were introduced to simplify asynchronous handling.

1. Promises:
2. Definition: Promises handle asynchronous operations more cleanly and avoid callback hell.

• States of Promises:
  Pending: Initial state, waiting for the result.
  Resolved: The operation is successful.
  Rejected: The operation failed.

• Methods:

.then(): Executes when the promise is resolved.
.catch(): Executes when the promise is rejected.
.finally(): Executes regardless of whether the promise is resolved or rejected.

Example of promises

const fetchData = () => {
    return new Promise((resolve, reject) => {
        let success = true; // Simulating success or failure
        setTimeout(() => {
            success ? resolve("Data fetched!") : reject("Failed to fetch data.");
        }, 2000);
    });
};

fetchData()
    .then((data) => console.log(data)) // Output: Data fetched!
    .catch((error) => console.error(error))
    .finally(() => console.log("Operation completed."));

1. Async/Await

• Purpose: Built on Promises for cleaner and more readable code.
• Async Function: Declares a function that will handle asynchronous operations.
• Await Keyword: Pauses the function execution until the promise resolves or rejects.

Example of Async/Await:

const fetchDataAsync = async () => {
    try {
        const data = await fetchData(); // Wait for the promise to resolve
        console.log(data);             // Output: Data fetched!
    } catch (error) {
        console.error(error);
    } finally {
        console.log("Operation completed.");
    }
};

fetchDataAsync();

5.Real-Life Analogy:

• Promises: Pending: Order pizza online and wait for delivery. Resolved: Pizza arrives. You enjoy your meal. Rejected: Pizza doesn’t arrive. You complain.
• Async/Await: You continue reading a book while waiting for the pizza to arrive.

6.Promise.all

• Purpose: Execute multiple promises concurrently and wait for all to complete. Example:

const promise1 = Promise.resolve("Task 1 completed");
const promise2 = Promise.resolve("Task 2 completed");

Promise.all([promise1, promise2])
    .then((results) => console.log(results)) // Output: ["Task 1 completed", "Task 2 completed"]
    .catch((error) => console.error(error));

1. Async/Await with Fetch API

• Fetch: A modern way to make HTTP requests in JavaScript. Example:

const fetchDataFromAPI = async () => {
    try {
        const response = await fetch("https://jsonplaceholder.typicode.com/posts");
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Error fetching data:", error);
    }
};

fetchDataFromAPI();

Highlights

• Promises clean up asynchronous operations and improve error handling.
• Async/Await makes the code easier to write and understand, especially for chained Promises.
• Promise.all is useful for running multiple asynchronous tasks in parallel.

So far it's been a beautiful ride.

Day 10 with fire

The above is the detailed content of My React Journey: Day 9. For more information, please follow other related articles on the PHP Chinese website!