Breaking News: Grepper is joining You.com. Read the official announcement!

Javascript async await & Promise

Add Answer

ap_Cooperative_dev answered on June 18, 2020 Popularity 10/10 Helpfulness 2/10

answer Javascript async await & Promise

related async await

related ASYNC AWAIT in Javascript

related async await in javascript

related example of async and await in javascript

related async promise javascript

related async await

related async and await in javascript

related async await

related javascript async/await

Javascript async await & Promise

Comment

we can only use await keyword before a function that

returns either a promise or is itself async.

Note: we can use async function or function returning
a Promise with .then()

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: async-await function javascript promise

Link to this answer
Share Copy Link

Contributed on Jul 23 2022

ap_Cooperative_dev

0 Answers Avg Quality 2/10

Closely Related Answers

async await

Comment

// example using promise
const user = () => {
	fetch("https://randomuser.me/api/?results=1")
    .then((data) => {
         console.log(data); // here you recive data
    }).catch((err)=>{
         console.log(err); // here error
    });
}

// example using async/await

const user = async () => {
  	// you must have use async keyword before use await
	const data = await fetch("https://randomuser.me/api/?results=1");
  	console.log(data); // if error occured it will be null or empty
}

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: async-await asyn

Link to this answer
Share Copy Link

Contributed on May 29 2022

Wandering Wryneck

0 Answers Avg Quality 2/10

ASYNC AWAIT in Javascript

Comment

The async Keyword
The async keyword is used to write functions that handle asynchronous actions.
We wrap our asynchronous logic inside a function prepended with
the async keyword. Then, we invoke that function.

async function myFunc() {
  // Function body here
};
 
myFunc();

async functions always return a promise. This means we can 
use traditional promise syntax, like .then() and .catch
with our async functions. An async function will return in
one of three ways:

1) If there’s nothing returned from the function, 
  it will return a promise with a resolved value of undefined.
2) If there’s a non-promise value returned from the function,
  it will return a promise resolved to that value.
3) If a promise is returned from the function, 
  it will simply return that promise

Example:

async function fivePromise() { 
  return 5;
}
 
fivePromise()
.then(resolvedValue => {
    console.log(resolvedValue);
  })  // Prints 5

In the example above, even though we return 5 inside the function body, 
what’s actually returned when we invoke fivePromise() is a promise 
with a resolved value of 5.

// Constructor Method:

function withConstructor(num){
  return new Promise((resolve, reject) => {
    if (num === 0){
      resolve('zero');
    } else {
      resolve('not zero');
    }
  });
}

withConstructor(0)
  .then((resolveValue) => {
  console.log(` withConstructor(0) returned a promise which 
resolved to: ${resolveValue}.`);
});

// Async Method:

const withAsync = async (num)=>{
if(num===0) {return 'zero'
}else{
 return 'not zero';

}
}


// Now invoking that function

withAsync(100)
  .then((resolveValue) => {
  console.log(` withAsync(100) returned a promise which 
resolved to: ${resolveValue}.`);
})



/* 
withAsync() reproduces the
functionality of withConstructor(). Though your function 
will return a promise, it should not construct the promise 
using the new keyword. Instead, it should rely on the fact 
that an async function automatically returns a promise.
*/

The await Operator:

 we covered the async keyword. By itself, it doesn’t do much;
async functions are almost always used with the additional 
keyword await inside the function body.

The await keyword can only be used inside an async function.
await is an operator: it returns the resolved value of a promise.
Since promises resolve in an indeterminate amount of time, 
await halts, or pauses, the execution of our async function
until a given promise is resolved.

In most situations, we’re dealing with promises that were 
returned from functions. Generally, these functions are through
a library. We can await the resolution of the promise it returns
inside an async function. In the example below, myPromise() 
is a function that returns a promise which will resolve to 
the string "I am resolved now!".

Example:

async function asyncFuncExample(){
  let resolvedValue = await myPromise();
  console.log(resolvedValue);
}
 
asyncFuncExample(); // Prints: I am resolved now!
/*
Within our async function, asyncFuncExample(), 
we use await to halt our execution until myPromise() 
is resolved and assign its resolved value to the variable 
resolvedValue. Then we log resolvedValue to the console.
We’re able to handle the logic for a promise in a way that 
reads like synchronous code.
*/

Handling Dependent Promises:
/*
The true beauty of async...await is when we have a series 
of asynchronous actions which depend on one another. 
For example, we may make a network request based on a 
query to a database. In that case, we would need to 
wait to make the network request until we had the results
from the database. With native promise syntax, we use a 
chain of .then() functions making sure to return
correctly each one:
*/

// Comparison of two versions:


function nativePromiseVersion() {
  returnsFirstPromise()
    .then((firstValue) => {
      console.log(firstValue);
      return returnsSecondPromise(firstValue);
    })
   .then((secondValue) => {
      console.log(secondValue);
    });
}

// -------
async function asyncAwaitVersion() {
  let firstValue = await returnsFirstPromise();
  console.log(firstValue);
  let secondValue = await returnsSecondPromise(firstValue);
  console.log(secondValue);
}


// The async...await version more closely resembles synchronous 
// code, which helps developers maintain and debug their code.
/*
Handling Errors:

With async...await, we use try...catch statements for error
handling. By using this syntax, not only are we able to 
handle errors in the same way we do with synchronous code, 
but we can also catch both synchronous and asynchronous errors.
This makes for easier debugging!
*/

//Example:

async function usingTryCatch() {
 try {
   let resolveValue = await asyncFunction('thing that will fail');
   let secondValue = await secondAsyncFunction(resolveValue);
 } catch (err) {
   // Catches any errors in the try block
   console.log(err);
 }
}
 
usingTryCatch();

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: async-await asyn

Link to this answer
Share Copy Link

Contributed on Jan 09 2023

M Hassan khan

0 Answers Avg Quality 2/10

async await in javascript

Comment

 const showPosts = async () => {
 const response = await fetch('https://jsonplaceholder.typicode.com/posts');
 const posts = await response.json();
 console.log(posts);
}

showPosts();

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: async-await asyn

Link to this answer
Share Copy Link

Contributed on Aug 18 2022

Enthusiastic Emu

0 Answers Avg Quality 2/10

example of async and await in javascript

Comment

// example of async and await in javascript
// First create promise
let myPromise = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Yay, I resolved!')
    }, 1000);
  });
}

// async without await keyword
async function noAwait() {
 let value = myPromise();
 console.log(value);
}
 
// async with await keyword
async function yesAwait() {
 let value = await myPromise();
 console.log(value);
}
 
noAwait(); // Prints: Promise { <pending> }
yesAwait(); // Prints: Yay, I resolved!

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Oct 13 2022

Chetan Nada

0 Answers Avg Quality 2/10

async promise javascript

Comment

await new Promise(resolve => setTimeout(resolve, 1000))

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jan 25 2022

Pudochu

0 Answers Avg Quality 2/10

async await

Comment

//used in node.js
const fetch = require('node-fetch');
async function Showuser() {
  const result = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  const date = await result.json();
  console.log(date);
}

Showuser();

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: async-await asyn

Link to this answer
Share Copy Link

Contributed on Aug 28 2021

Yucky Yacare

0 Answers Avg Quality 2/10

async and await in javascript

Comment

simple use case of async function in javascropt

async function logFetch(url) {
  try {
    const response = await fetch(url);
    console.log(await response.text());
  }
  catch (err) {
    console.log('fetch failed', err);
  }
}

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: dev.to

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Feb 20 2023

Prabin Kandel

0 Answers Avg Quality 2/10

async await

Comment

async function showAvatar() {
	// read
  	await setTimeout(resolve, 3000);
    // read next 3s
}

showAvatar();

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: async-await asyn

Link to this answer
Share Copy Link

Contributed on Aug 06 2020

MM.Mirzaei.Dev

0 Answers Avg Quality 2/10

async await

Comment

async function f() {

  try {
    let response = await fetch('/no-user-here');
    let user = await response.json();
  } catch(err) {
    // catches errors both in fetch and response.json
    alert(err);
  }
}

f();

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: javascript.info

Tags: async-await asyn

Link to this answer
Share Copy Link

Contributed on Jun 18 2020

Yawning Yak

0 Answers Avg Quality 2/10

javascript async/await

Comment

//ORIGINAL
//each .then() returns a promisse and can be chained. The .then() will run after the previous one has finished. It emulates an async/await behavior.

fetch('https://jsonplaceholder.typicode.com/users')//fetch the content
  .then((response) => response.json())//then use that content and convert it to a javascript object
  .then(users => {
    const firstUser = users[0];
    console.log(firstUser);
    return fetch('https://jsonplaceholder.typicode.com/posts?userId=' + firstUser.id);
  })//then return the content from posts related to that user ID
  .then((response) => response.json())//then use that content and convert it to a javascript object
  .then(posts => console.log(posts));//then log the result


//ASYNC/AWAIT
const myAsyncFunction = async () => {//define that this will be asynchronous
  const usersResponse = await fetch('https://jsonplaceholder.typicode.com/users');//wait for the fecth result and put it in the variable
  const users = await usersResponse.json();//wait for the previous item to be done, transform it into a javascript object and put it in the variable
  const secondUser = users[1];

  console.log(secondUser);//then log the result

  const postsResponse = await fetch('https://jsonplaceholder.typicode.com/posts?userId=' + secondUser.id);//wait for the previous item to be done, wait for the fecth result and put it in the variable
  const posts = await postsResponse.json();//wait for the previous item to be done, transform it into a javascript object and put it in the variable

  console.log(posts);//then log the result
}

myAsyncFunction();

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Nov 01 2022

Marcelo Cortez

0 Answers Avg Quality 2/10

Javascript async await & Promise

Contents

More Related Answers

Javascript async await & Promise

Closely Related Answers

async await

ASYNC AWAIT in Javascript

async await in javascript

example of async and await in javascript

async promise javascript

async await

async and await in javascript

async await

async await

javascript async/await

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.