js -Asynchrononous

Asynchrononous javascript

synchrononous


console.log("First");   //First
console.log("Second");  //Second
console.log("Third");   //Third

task contionue vaa poittea irukkum

Asynchrononous:


console.log("Hello World.!");  // 1st print aagum


 setTimeout(() => {
   console.log("Hello after 2 seconds");   // 2 sec apram third print agum
 }, 2000);


console.log("welcome 'javascript'");  // second print aagum

callback function

Callback illustrated


function One() {
    // Do something    // apram one ulllathu execute agum.
}
function Two(call_One) {
    // Do something else
    call_One()  // one na call pannum
}
Two(One); // two vaa call pannum


//? call back inga aathigam use pannrathu illa.

Promises

3 states: Pending, Fulfilled, Rejected

Pending: Initial state, not yet started Fulfilled: Successful, resolved with a value Rejected: Failed, rejected with a reason


      // var name     //obj   // 2 arguments     
const myPromise = new Promise((resolve, reject) => {

                  //false
    const error = true;  // condition

    if (!error) {
        resolve("Yes! resolved the promise");
    } else {
        reject("No! rejected the promise.");
    }
})

console.log(myPromise);  //condition true : <rejected> //false :<Fulfilled>

//promise mudichudha ippo enna statelaa irukku...obj aa show paanum.

true output: return states


// Promise <REJECTEDed>: 'NO! reJECT the promise.'

false output: return states

// Promise {<fulfilled>: 'Yes! resolved the promise'
// [[Prototype]]: Promise[[PromiseState]]: "fulfilled"[[PromiseResult]]: "Yes! resolved the promise"


// obj aa show pannamaa ..direct aa value vaa show pannum. (then)


//function
myPromise

.then(value =>{

  //console.log(value);   // 'Yes! resolved the promise'
  return value + " welcome"; // 'Yes! resolved the promise welcome' 

})
.then(newvalue=> { //!  another then another then use pannalamm. (chain)

  console.log(newvalue); // 'Yes! resolved the promise' return panna value ingaa vaarum

// true vaa irundha then work agum.
// error vaandha catch work aagum.

})
.catch(error =>{

    console.log(error);  // 'No! rejected the promise.'

});

 //.then  then use pannrathunaalaa callback function naathavirkaalaam.

example:


const myPromise = new Promise((resolve, reject) => {

    const error = false; 

    if (!error) {
        resolve("Yes! resolved the promise");
    } else {
        reject("No! rejected the promise.");
    }
});


const myNextPromise = new Promise((resolve, reject) => {

    setTimeout(function () {

        resolve("my next promise resolved");

    }, 3000)
});


myPromise
  .then((value) => {
    console.log(value); // 'Yes! resolved the promise' return panna value ingaa vaarum
  })
 myNextPromise.then(value=> {

  console.log(value); // 'Yes! resolved the promise' return panna value ingaa vaarum

}).catch(error =>{

    console.log(error);  // 'No! rejected the promise.'

});

pending

// serverlaa irunthu oru data vaa fetch pannrom.

const users 
 =fetch("http://jsonplaceholder.typicode.com/users").then(response =>{

// athoda state kedaikkum
 //console.log(response);//Response {type: 'cors', url: 'https://jsonplaceholder.typicode.com/users', redirected: true, status: 200, ok: true, …}  



  return response.json();  // json readable dataku

}).then(users =>{

    console.log(users);

   // console.log(users[0].name); // 'Leanne Graham'
    //console.log(users[0].email); // 'Sincere@april.biz'
    //console.log(users[1].address.street); // 'Kulas Light'


 // for each 1 onna print pannum.


    //users.forEach(user => { 
     //   console.log(users);

  //  });

})

console.log(users); // Promise {<pending>}

//! Async / Await

// then then potta oru readeable aa irukkathu ..athukku than async await vaanthuchu