wap-notes

Synchronous and Asynchronous Programming in JavaScript

Synchronous Programming

• Definition: Synchronous programming executes code line by line, meaning each line of code waits for the previous one to finish before executing. This can lead to delays if a particular task takes time (e.g., reading a file or making a network request).
• Example:

  console.log('Start');
  console.log('Middle');
  console.log('End');
  

  Output:

  Start
  Middle
  End
  

  In this case, the execution is in order.

Asynchronous Programming

• Definition: Asynchronous programming allows multiple tasks to run concurrently without waiting for the previous task to complete. This is especially useful for tasks that take time, such as fetching data from an API or performing file operations.
• Example:

  console.log('Start');
  setTimeout(() => {
      console.log('Middle');
  }, 1000);
  console.log('End');
  

  Output:

  Start
  End
  Middle
  

  The setTimeout function runs asynchronously, allowing the code to continue executing while it waits.

---

Promises

What is a Promise?

• Definition: A promise is an object representing the eventual completion (or failure) of an asynchronous operation and its resulting value.
• States of a Promise:
  1. Pending: Initial state, neither fulfilled nor rejected.
  2. Fulfilled: Operation completed successfully.
  3. Rejected: Operation failed.

Creating a Promise

let promise = new Promise((resolve, reject) => {
  let success = true; // Simulating a condition
  if (success) {
    resolve('Task completed successfully!');
  } else {
    reject('Task failed.');
  }
});

.then() and .catch()

Using .then()

• Definition: .then() is used to handle the successful completion of a promise. It accepts a callback function that gets executed when the promise is resolved.
• Example:

  promise.then((message) => {
    console.log(message); // Output: Task completed successfully!
  });
  

Using .catch()

• Definition: .catch() is used to handle errors or rejections in a promise. It accepts a callback function that gets executed when the promise is rejected.
• Example:

  promise.catch((error) => {
    console.log(error); // Output: Task failed.
  });
  

---

Fetch Method

Definition: The fetch() method is used to make network requests and returns a promise that resolves to the response object. This can be used to make API calls to retrieve or send data.

Syntax:

fetch(url)
  .then(response => response.json()) // Converting the response to JSON
  .then(data => console.log(data)) // Handling the data
  .catch(error => console.error('Error:', error)); // Handling errors

• Example:

  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.log('Error:', error));
  

---

Async/Await

Definition: async/await provides a way to work with asynchronous code in a more synchronous-looking manner, making the code easier to read and understand.

• async: Declares a function as asynchronous, meaning it will return a promise.
• await: Pauses the execution of an async function until the promise is resolved or rejected.

Example:

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

fetchData();

Explanation:

• fetchData() is an asynchronous function that uses await to wait for the fetch call to complete.
• The try block is used to handle successful data retrieval, and the catch block catches any errors that occur during the process.

When to Use Async/Await

• Use async/await when you need to handle multiple asynchronous operations sequentially.
• It makes the code more readable, especially when dealing with complex chains of .then() and .catch().

This site is open source. Improve this page.