JAVASCRIPT

async await

// 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
}

async await in javascript

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

showPosts();

javascript async/await

//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();

async await

//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();

async await

// ASYNC will always returns promises
// NOTE : AWAIT should be kept only inside ASYNC function
// AWAIT can't be used in regular function
/* TIPS : Js is single threaded & synchronous in nature BUT, we can
          make it as asyncronous by using (ASYNC/AWAIT)*/

//(Example 1 : fetching Random Image)
async function RandomImage(){  //remember async and await is powerful for async operations, always await should be inside of async only.

  try {
    const raw_response = await fetch("https://www.themealdb.com/api/json/v1/1/random.php");
      if (!raw_response.ok) { // check for the 404 errors
          throw new Error(raw_response.status);
      }
    const json_data = await raw_response.json();  //AWAIT
    let data = json_data.meals[0];

    console.log(data);
  }
  catch (error) { // catch block for network errors
      console.log(error); 
  }
}
RandomImage();


//(Example 2 : returning another promise)
console.log("1 is working");
console.log("2 is working");
  var AsyncFunction = async() => {
    var x = new Promise((resolve,reject) => {
        setTimeout(() => resolve("3 is working"), 3000);
    });
    var result = await x;
    return result;
  }
AsyncFunction().then(resolved => console.log(resolved));
console.log("3 is working");

async await for promise nodejs

<script>
  const helperPromise = function () {
    const promise = new Promise(function (resolve, reject) {
      const x = "geeksforgeeks";
      const y = "geeksforgeeks";
      if (x === y) {
        resolve("Strings are same");
      } else {
        reject("Strings are not same");
      }
    });
 
    return promise;
  };
 
  async function demoPromise() {
    try {
      let message = await helperPromise();
      console.log(message);
    } catch (error) {
      console.log("Error: " + error);
    }
  }
 
  demoPromise();
</script>

async await

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

showAvatar();

async promise javascript

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

async await

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();

async await

async function () {
  const fetchAPI = fetch(`https://bn-hadith-api.herokuapp.com/hadiths/0`);
  const response = await fetchAPI;
  const data = await response.json();
  console.log(data);
}

example of async and await in javascript

// 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!

example of promise and async in javascript

// example of promise and async in javascript
// 1) promise: we need to write new keyword to create promise
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}.`);
});
// Output: withConstructor(0) returned a promise which resolved to: zero.

// 2) async:  we don't need to write new keyword to create promise
async function withAsync(num){
  if (num === 0) {
    return 'zero';
  } else {
    return 'not zero';
  }
}

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

// Output: withAsync(100) returned a promise which resolved to: not zero.

promise async await

async function myFetch() {
  let response = await fetch('coffee.jpg');
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  return await response.blob();

}

myFetch().then((blob) => {
  let objectURL = URL.createObjectURL(blob);
  let image = document.createElement('img');
  image.src = objectURL;
  document.body.appendChild(image);
}).catch(e => console.log(e));

javascript promise async

await new Promise(resolve => setTimeout(resolve, 5000));

Javascript async await & Promise

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()

async await

async function abc() {
    console.log("1");
    const response = await fetch("https://jsonplaceholder.typicode.com/users");
    console.log("4");
    const users = await response.json();
    console.log("5");
    return users;
  }
  
  const a = abc();
  
  a.then((e) => {
    console.log(e);
  });
  console.log("2");
  console.log(a);
  console.log("3");

async await js

fetch('coffee.jpg')
.then(response => {
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  } else {
    return response.blob();
  }
})
.then(myBlob => {
  let objectURL = URL.createObjectURL(myBlob);
  let image = document.createElement('img');
  image.src = objectURL;
  document.body.appendChild(image);
})
.catch(e => {
  console.log('There has been a problem with your fetch operation: ' + e.message);
});