Async await JavaScript

Please check out the video below. He explained everything very well.

Link: https://www.youtube.com/watch?v=8aGhZQkoFbQ

Hi Gomij, 

Do refer below links, which will help u to understand with examples

https://www.freecodecamp.org/news/javascript-async-await/

The async and await keywords are special syntax in JavaScript that are used to work with promises in a more comfortable and readable way.

Async Function: An async function is a function that implicitly returns a promise. The async keyword before a function means that the function will always return a promise. Any value returned by the function is wrapped in a resolved promise automatically. Here’s an example:

async function f() {
    return 1;
}
f().then(alert); // 1

In the above example, the function f() returns a resolved promise with the result of 1.

Await Keyword: The await keyword is used inside an async function to pause its execution and wait for a promise to resolve or reject before continuing. Here’s an example:

async function f() {
    let promise = new Promise((resolve, reject) => {
        setTimeout(() => resolve("done!"), 1000)
    });

    let result = await promise; // wait until the promise resolves
    alert(result); // "done!"
}
f();

In the above example, the function execution pauses at let result = await promise; and resumes when the promise settles, with result becoming its result. So, the code shows “done!” after one second12.

Remember, the await keyword can only be used inside an async function3. If we try to use await in a non-async function, there would be a syntax error1.

This async/await syntax provides a way of maintaining cleaner and more readable code when working with asynchronous operations12.

Thanks

• The await keyword can only be used inside an async function.
• It pauses the execution of the async function until the awaited Promise settles (either resolves or rejects).
• The await keyword then returns the resolved value of the Promise.

// Asynchronous function declared with async keyword
async function asyncFunction() {
  // Create a Promise that resolves after 2 seconds
  const delayPromise = new Promise(resolve => {
    setTimeout(() => {
      resolve('Resolved after 2 seconds');
    }, 2000);
  });

  // Pause execution of the function until the delayPromise settles
  const result = await delayPromise;

  // This line will be executed after the delayPromise settles
  console.log(result); // Output: Resolved after 2 seconds
}

// Calling the async function
asyncFunction();

// Asynchronous function declared with async keyword
async function asyncFunction() {
  return 'Hello from async function';
}

// Calling the async function
const resultPromise = asyncFunction();

// Handling the Promise returned by the async function
resultPromise.then(result => {
  console.log(result); // Output: Hello from async function
});

• The async keyword is used to declare asynchronous functions.
• Async functions automatically return a Promise.

• Async/await builds upon Promises, which are objects representing the eventual completion (or failure) of an asynchronous operation.
• Promises have three states: pending, fulfilled (resolved), and rejected.

// Function that returns a Promise resolving after a specified time
function delay(ms) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(`Promise resolved after ${ms} milliseconds`);
    }, ms);
  });
}

// Using Promise with then/catch
delay(2000)
  .then(message => {
    console.log(message); // This will be executed when the Promise is resolved
  })
  .catch(error => {
    console.error(error); // This will be executed if the Promise is rejected
  });

// Using async/await
async function runAsync() {
  try {
    const message = await delay(3000); // Wait for the Promise to be resolved
    console.log(message); // This will be executed when the Promise is resolved
  } catch (error) {
    console.error(error); // This will be executed if the Promise is rejected
  }
}

runAsync();