Promises VS async. await and scenarious of uses

In JavaScript, both async/await and Promise are used to handle asynchronous operations. However, they differ in terms of syntax, readability, and error handling. Let's explore the differences between async/await and Promise with examples and explanations:

Syntax:
Promise: Promises use a chainable syntax with .then() and .catch() methods to handle asynchronous operations. It involves creating a promise object and attaching callbacks to it.
function fetchUser() {
  return new Promise((resolve, reject) => {
    // Asynchronous operation (e.g., API call)
    setTimeout(() => {
      const user = { name: 'abhi', age: 130 };
      resolve(user);
    }, 2000);
  });
}

fetchUser()
  .then((user) => {
    console.log(user);
  })
  .catch((error) => {
    console.log(error);
  });
async/await: Async functions are defined using the async keyword, and await is used to pause the execution until a promise is resolved. It provides a more synchronous and readable code structure.
async function fetchUser() {
  return new Promise((resolve, reject) => {
    // Asynchronous operation (e.g., API call)
    setTimeout(() => {
      const user = { name: 'abhi', age: 30 };
      resolve(user);
    }, 2000);
  });
}

async function main() {
  try {
    const user = await fetchUser();
    console.log(user);
  } catch (error) {
    console.log(error);
  }
}

main();
2. Readability and Flow:

Promise: Promises use a chain of .then() and .catch() statements, which can sometimes lead to nested and complex code structures, known as "callback hell" or "promise chaining."
fetchUser()
  .then((user) => {
    return updateUser(user);
  })
  .then((updatedUser) => {
    return deleteUser(updatedUser.id);
  })
  .then(() => {
    console.log('User deleted successfully.');
  })
  .catch((error) => {
    console.log(error);
  });
async/await: Async/await provides a more linear and readable flow of code, similar to synchronous programming, making it easier to understand and maintain.
async function main() {
  try {
    const user = await fetchUser();
    const updatedUser = await updateUser(user);
    await deleteUser(updatedUser.id);
    console.log('User deleted successfully.');
  } catch (error) {
    console.log(error);
  }
}

main();
3. Error Handling:

Promise: Promises handle errors using the .catch() method, which can be attached at the end of the promise chain to catch any errors that occur during the asynchronous operations.
fetchUser()
  .then((user) => {
    console.log(user);
    throw new Error('Some error occurred.');
  })
  .catch((error) => {
    console.log(error);
  });
async/await: Async/await handles errors using traditional try-catch blocks, allowing for more straightforward and intuitive error handling.
async function main() {
  try {
    const user = await fetchUser();
    console.log(user);
    throw new Error('Some error occurred.');
  } catch (error) {
    console.log(error);
  }
}

main();
Scenario of choosing Promises and async await .
Promise and async await have his own strengths and suitable for different scenarios here we ‘ll discuses about few these scenarios that we should choose promise and async await

Use Promises when:

You’re working with existing asynchronous code that already returns promises, such as browser APIs or third-party libraries.
You need fine-grained control over the flow of asynchronous operations using methods like .then() and .catch().
You want to handle multiple asynchronous operations concurrently using Promise.all() or Promise.race().
function fetchUser() {
  return new Promise((resolve, reject) => {
    // Asynchronous operation (e.g., API call)
    setTimeout(() => {
      const user = { name: 'abhi', age: 30 };
      resolve(user);
    }, 2000);
  });
}

fetchUser()
  .then((user) => {
    console.log(user);
  })
  .catch((error) => {
    console.log(error);
  });
Use async/await when:

You want to write asynchronous code that appears more synchronous and readable, making it easier to understand and maintain.
You need to pause the execution of code until a promise is resolved or rejected using the await keyword.
You want to handle exceptions and errors using traditional try-catch blocks.
async function fetchUser() {
  return new Promise((resolve, reject) => {
    // Asynchronous operation (e.g., API call)
    setTimeout(() => {
      const user = { name: 'abhi', age: 30 };
      resolve(user);
    }, 2000);
  });
}

async function main() {
  try {
    const user = await fetchUser();
    console.log(user);
  } catch (error) {
    console.log(error);
  }
}

main();
Conclusion : in general, async/await provides a more concise and synchronous-like coding style, especially for handling sequential asynchronous operations. Promises are more suitable when working with existing promise-based APIs or when you need more control over the flow of asynchronous operations. It's worth noting that async/await is built on top of promises, so you can mix and match them as needed in your codebase.

Popular posts from this blog

how to create first React Web application

Image
Image from unplash How to Create first React Web application Hope guys you seen all about the React web application in this blog my meanly concern about that how to create react web application so there so few step which you ‘ve to follow to create react application First you have to install  node  ,installation process is too easy confirm node has been installed in your machine or not to check it you have to hit ( node -v) in you terminal or cmd that ‘ll print some thing 18.10 (current version ) something like it can be different as per timing coz it updates time to time after installation of node now you have to install  ( node package executes )  with is command  npx i -g create-react-app   here -g stand for global installation that mean we ‘ll not need to stall it again and gain if we change the directory to create react application with help we ‘ll be able to create react application In this step you have hit a bigger combinational command in you cmd or terminal  npx create-react-
Read more

LET Understand Regular expression in JS

Image
Regular expressions, often abbreviated as regex or RegExp, are powerful tools for pattern matching and manipulation of strings in JavaScript. They allow you to search, extract, replace, and validate text based on specific patterns. In JavaScript, regular expressions are represented by a RegExp object or by using the regular expression literal syntax, which consists of a pattern enclosed in forward slashes (/). For example: const regex = /pattern/; Regular expressions can include a combination of regular characters (such as letters and numbers) and special characters that define the pattern. Let’s explore the different components and features of regular expressions in JavaScript, along with examples for each: Matching Characters: Literal Characters: Literal characters match themselves exactly. For example, the regular expression /abc/ matches the characters "abc" in a string. Metacharacters: Metacharacters have special meanings within regular expressions. Some comm
Read more

DATA TYPES IN PYTHON

Image
Python , one of the most popular programming languages, offers a wide range of data types that empower developers to manipulate and store different kinds of information efficiently. Understanding data types is essential for writing robust and error-free Python code. In this comprehensive guide, we will delve into the various data types available in Python and explore their characteristics, use cases, and common operations. Through examples, we will illustrate how to work with each data type effectively. Whether you’re a beginner or an experienced programmer, this blog will provide valuable insights into Python’s data types. Numeric Data Types:  Python provides several numeric data types, including integers, floating-point numbers, and complex numbers. These data types are fundamental for performing mathematical operations in Python. # Integers x = 5 print (x) # Output: 5 print ( type (x)) # Output: <class 'int'> # Floating-point numbers y = 3.14 print (y) #
Read more