Content

• Synchronous vs Asynchronous JavaScript
• Callbacks
• Promises
• then() and catch()
• async and await
• try...catch Error Handling
• fetch() API
• HTTP Methods
• Handling API Data
• Loading and Error State Concept

---

Synchronous vs Asynchronous JavaScript

• Synchronous code executes line by line
• Asynchronous code runs in background without blocking execution
• API calls in React are asynchronous

//Synchronous example
console.log("Start");
console.log("Middle");
console.log("End");

//Asynchronous example
console.log("Start");
setTimeout(() => {
    console.log("Async Task");
}, 2000);
console.log("End");

---

Callbacks

• A callback is a function that is passed as an argument to another function.
• The callback function is executed after a task is completed.
• Callbacks are commonly used in asynchronous operations like API calls or timers.

Example : Callback Function

function fetchData(callback) {

    //Simulating an asynchronous task using setTimeout
    setTimeout(() => {

        //Calling the callback function after 2 seconds
        callback("Data received");

    }, 2000);
}

//Passing a function as a callback
fetchData((message) => {
    console.log(message);
});

Explanation of the Example

• fetchData() is a function that accepts another function as a parameter.
• The parameter callback represents the function passed while calling fetchData.
• setTimeout() simulates a time-consuming task such as an API call.
• After 2 seconds, the callback function is executed.
• The value "Data received" is passed to the callback.
• The callback function receives this value as the message parameter.
• Finally, the message is printed in the console.

In this example, the callback ensures that the code inside it runs only after the asynchronous task is completed.

Callbacks were widely used before Promises. However, using many nested callbacks can make code difficult to read and maintain. This situation is known as callback hell, which is why modern JavaScript prefers Promises and async/await.

---

Promises

• A Promise is an object that represents the result of an asynchronous operation.
• The result may be available now, later, or never.
• Promises help handle asynchronous code in a cleaner and more readable way.

Promise States

• Pending – Initial state, operation is in progress
• Fulfilled – Operation completed successfully
• Rejected – Operation failed

Example : Creating a Promise

const getData = new Promise((resolve, reject) => {

    //Simulating success or failure
    let success = true;

    if (success) {
        //Promise completed successfully
        resolve("Data loaded successfully");
    } else {
        //Promise failed
        reject("Error loading data");
    }
});

Explanation of the Example

• getData is a Promise object.
• The Promise constructor takes a function with two parameters: resolve and reject.
• resolve() is called when the task is successful.
• reject() is called when the task fails.
• The variable success is used here to simulate success or failure.
• If success is true, the Promise moves to the fulfilled state.
• If success is false, the Promise moves to the rejected state.

What Problem Do Promises Solve?

• Callbacks can become deeply nested and hard to read.
• This situation is known as callback hell.
• Promises allow better control over asynchronous flow.
• They separate success and error handling clearly.
• Promises make asynchronous code easier to understand and maintain.

Promises provide a structured way to handle asynchronous operations, which is why modern JavaScript and React applications rely on them.

---

then() and catch()

• then() handles successful result
• catch() handles errors

getData
    .then(response => {
        console.log(response);
    })
    .catch(error => {
        console.log(error);
    });

---

async and await

• async/await makes asynchronous code easier to read
• await pauses execution until Promise resolves
• Used heavily inside React useEffect()

async function loadData() {
    const message = await getData;
    console.log(message);
}

loadData();

---

Error Handling using try...catch

• Used with async/await
• Prevents application crash

async function loadData() {
    try {
        const result = await getData;
        console.log(result);
    } catch (error) {
        console.log("Error:", error);
    }
}

---

fetch() API

• fetch() is used to call APIs
• Returns a Promise
• Response must be converted to JSON

fetch("https://jsonplaceholder.typicode.com/users")
    .then(response => response.json())
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.log(error);
    });

---

HTTP Methods Overview

Method	Purpose
GET	Fetch data
POST	Create new data
PUT	Update existing data
DELETE	Remove data

---

Handling API Response Data

• API response is usually stored in a variable
• Later used for rendering UI

async function getUsers() {
    const response = await fetch("https://jsonplaceholder.typicode.com/users");
    const users = await response.json();
    console.log(users);
}

---

Loading and Error State Concept

• Loading state shows progress while API is fetching data
• Error state handles failed API calls
• This concept is directly used in React state management

let isLoading = true;
let error = null;

fetch("https://jsonplaceholder.typicode.com/users")
    .then(res => res.json())
    .then(data => {
        isLoading = false;
        console.log(data);
    })
    .catch(err => {
        isLoading = false;
        error = err;
        console.log("Error occurred");
    });