{"flag":true,"single":true,"pageTitle":"Async await in Javascript ||Sync, Async, Callback, Promise, Aync await, Fetch Api","post":{"id":288,"user_id":"1","slug":"async-await-in-javascript-lezr","title":"Async await in Javascript ||Sync, Async, Callback, Promise, Aync await, Fetch Api","body":"

Sync:<\/strong><\/p>\r\n

Code run in sequence, Each next instruction wait to execute Next one.<\/p>\r\n

Console.log(\"1\");\r\nConsole.log(\"2\");\r\nConsole.log(\"3\");<\/code><\/pre>\r\n
Output: <\/p>\r\n
1
2
3<\/p>\r\n
Async:<\/strong>
Execute Next instruction immediately without blockig the flow, for Async we use setTimeout <\/strong>function<\/p>\r\n
setTimeout(hello,2000); \/\/ it will execute any given function with given time.\r\nfunction hello(){\r\n    console.log(\"I will be executed after 2 seconds\");\r\n}<\/code><\/pre>\r\n
The above code is equal to <\/p>\r\n
setTimeout(()=>{\r\n    console.log(\"I will be executed after 2 seconds\");\r\n},2000);<\/code><\/pre>\r\n
Also this one<\/p>\r\n
setTimeout(hello,2000);\r\nconst hello = ()=>{  \/\/arrow function to a variable\r\n    console.log(\"I will be executed after 2 seconds\");\r\n}<\/code><\/pre>\r\n
Now if we put<\/strong><\/p>\r\n<\/colgroup>\r\n\r\n\r\n
\r\n
console.log(1);\r\nconsole.log(2);\r\nsetTimeout(\r\n    ()=>{ console.log(\"xd\"); }\r\n    ,4000\r\n );\r\nconsole.log(3);<\/code><\/pre>\r\n<\/td>\r\n
\r\n
Output:<\/strong>
1<\/p>\r\n
2<\/p>\r\n
3 \/\/don't wait for xd output, because this is async<\/p>\r\n
xd \/\/after 4 seconds<\/p>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n
 <\/p>\r\n
CallBack:
<\/strong>A function passed in another as argument<\/p>\r\n<\/colgroup>\r\n\r\n\r\n
\r\n
function calculator(a,b,DoSum){\r\n    DoSum(a,b);\r\n}<\/code><\/pre>\r\n<\/td>\r\n
\r\n
function sum(a,b){\r\n    console.log(a+b);\r\n}<\/code><\/pre>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n
So now Call calculator(1,2,sum<\/strong>); \/\/inside calculator DoSum is replaced by sum and sum function is called, so we can use any parameter in place of DoSum<\/p>\r\n
********* CallBack Hell *******
<\/em><\/strong>Let suppose we want to get a data and if returned our data then send 2nd request then 3rd then ....<\/p>\r\n
we use code below 
Real case example will be (if username exist, then check password, if password and user matched then check for 2fa)
<\/strong><\/p>\r\n
function getData(dataId, getNextData) {   \/\/ Simulate data retrieval with a 2-second delay\r\n        setTimeout(() => {\r\n            console.log(\"data\", dataId);\r\n            if (getNextData) {\r\n                getNextData();\r\n            }\r\n        }, 2000);\r\n    }\r\n    \/\/getData(1); \/\/ if condition is not executed, \r\n\r\n    \/\/ Callback hell example\r\ngetData(1, () => {   \r\n        \/\/getData(1, getData(2)); we can't use like this so we use arrow functions\r\n        console.log(\"getting data2 ....\");\r\n        getData(2, () => {\r\n            console.log(\"getting data3 ....\");\r\n            getData(3, () => {\r\n                console.log(\"getting data4 ....\");\r\n                getData(4);\r\n            });\r\n        });\r\n    });<\/code><\/pre>\r\n
************ Promise **********<\/strong>
    *<\/strong> To solve call back hell we use promise
    *<\/strong> Promise is promise for completion of task. It is an object
    *<\/strong> It has 3 states, pending, fulfilled, rejected<\/strong>
    *<\/strong> if resolve()<\/strong> function run promise is fulfilled<\/strong>, if reject <\/strong>function run promise is rejected <\/strong>else pending<\/strong><\/p>\r\n
Pending state<\/strong><\/p>\r\n
let my_promise = new Promise((resolve,reject)=>{\r\n        console.log(\"promise\"); \r\n       \/\/in console type my_promise and check its state (its pending)\r\n});<\/code><\/pre>\r\n
Resolved State:
<\/strong><\/p>\r\n
let my_promise_resolved = new Promise((resolve,reject)=>{\r\n        resolve(123); \/\/resolve definition created by js internally\r\n        console.log(\"my_promise_resolved\"); \r\n        \/\/in console type my_promise_resolved and check its state (its fulfilled)\r\n});<\/code><\/pre>\r\n
Rejected Proxy<\/strong><\/p>\r\n
let my_promise_rejected = new Promise((resolve,reject)=>{\r\n        reject(\"Error: rejected item\"); \/\/resolve is created by js internally\r\n        console.log(\"my_promise_rejected\"); \r\n        \/\/in console type my_promise_resolved and check its state (its fulfilled)\r\n});<\/code><\/pre>\r\n
    *<\/strong> How we use promise <\/strong>if we get promise from some API <\/strong>etc 
    *<\/strong> promise.then() <\/strong>is used when promise is fulfilled
    *<\/strong> promise.catch()<\/strong> is used when promise failed 
    *<\/strong> see examples below, we can use a parameter to get  PromiseResult <\/strong>generated by resolve <\/strong>or reject <\/strong>function<\/p>\r\n
Resolved Proxy<\/strong><\/p>\r\n
my_promise_resolved.then(()=>{\r\n    console.log(\"wao my promise is fullfiled\");\r\n});<\/code><\/pre>\r\n
Resolved Proxy WITH PromiseResult<\/strong><\/p>\r\n
my_promise_resolved.then((resu)=>{\r\n    console.log(\"wao my promise is fullfiled\",resu);\r\n});<\/code><\/pre>\r\n
Rejected promise with PromiseResult<\/strong><\/p>\r\n
my_promise_resolved.catch((resu)=>{\r\n    console.log(\"oh hu failed\",resu);\r\n});<\/code><\/pre>\r\n
************ Promise chaining ************ 
<\/strong>let suppose a async<\/strong> function returen promise <\/strong>with 4 seconds delay ie asyncFunc <\/strong>and we want to get someother data after getting previous one successfully we use promise.then<\/strong> inside promise.then
<\/strong><\/p>\r\n<\/colgroup>\r\n\r\n\r\n
\r\n
function asyncFunc(){ \/\/think some api return you promise\r\n        return new Promise((resolve,reject)=>{\r\n            setTimeout(()=>{\r\n                console.log(\"some data\");\r\n                resolve(\"success\");\r\n            },4000);\r\n        });\r\n}<\/code><\/pre>\r\n<\/td>\r\n
\r\n
let p1 = asyncFunc(); \r\n    p1.then((res)=>{ \/\/you are handling promise\r\n        console.log(\"p1::: \",res);\r\n        \/\/ geting more data using chaining so first solve p1, then p2\r\n        let p2 = asyncFunc();\r\n        p2.then((res)=>{\r\n            console.log(\"p2::: \",res);\r\n        });\r\n});<\/code><\/pre>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n
We can make it simple also AND NOW compare it  with callback hell, its easy then that <\/p>\r\n
asyncFunc().then((res)=>{ \r\n        console.log(\"p1 SIMPLE CODE::: \",res);\r\n        asyncFunc().then((res)=>{\r\n            console.log(\"p2 SIMPLE CODE::: \",res);\r\n        });\r\n});<\/code><\/pre>\r\n
************  ASYNC, AWAIT ************ <\/strong><\/p>\r\n
BUT THIS IS ALSO DIFFICULT, WE USE ASYNC, AWAIT
> async <\/strong>function always return a promise<\/strong> , no need to handle promise manually
> await<\/strong>, its wait untill function return promise
> but await is only used inside aync functions, ie we used below exe function<\/p>\r\n<\/colgroup>\r\n\r\n\r\n
\r\n
function api(){\r\n    return new Promise((resolve,reject)=>{\r\n        setTimeout(()=>{\r\n            console.log(\"hello\");\r\n            resolve(200);\r\n        },2000);\r\n    });\r\n}<\/code><\/pre>\r\n<\/td>\r\n
\r\n
 \/\/ await api(); it is wrong\r\nasync function exe(){ \/\/in console execute it like exe()\r\n    await api();\r\n    await api();\r\n}<\/code><\/pre>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n
In callback hell, promise, promise chaining we don't need extra function , but in async await, we need to define extra function 
To prevent it we use IIFE, Immediate invoked function execution<\/p>\r\n
\/***** IIFE ********\/\r\n(async function(){ \/\/ no need to run exe() in console\r\n    await api(); \r\n    await api();\r\n})();<\/code><\/pre>\r\n
 <\/p>\r\n
FETCH API: No need ajax requests anymore<\/strong><\/p>\r\n
Fetch api always return promise<\/p>\r\n
 <\/p>\r\n
const get_data = async ()=>{\r\n    console.log(\"getting data\");\r\n   var responce = await fetch(\"https:\/\/jsonplaceholder.typicode.com\/posts\/1\"); \/\/return 1st response promise\r\n   var actual_data = await responce.json(); \/\/2ND responce\r\n    console.log(responce); \r\n    console.log(actual_data); \r\n}<\/code><\/pre>\r\n
POST REQUEST:<\/strong><\/p>\r\n
const response = await fetch(\"https:\/\/example.org\/post\", {\r\n  method: \"POST\",\r\n  \/\/ ...\r\n});<\/code><\/pre>\r\n
HEADERS:<\/p>\r\n
const response = await fetch(\"https:\/\/example.org\/post\", {\r\n  headers: {\r\n    \"Content-Type\": \"application\/json\",\r\n  },\r\n  \/\/ ...\r\n});<\/code><\/pre>\r\n
Cancel request:<\/p>\r\n
const controller = new AbortController();\r\n\r\nconst fetchButton = document.querySelector(\"#fetch\");\r\nfetchButton.addEventListener(\"click\", async () => {\r\n  try {\r\n    console.log(\"Starting fetch\");\r\n    const response = await fetch(\"https:\/\/example.org\/get\", {\r\n      signal: controller.signal,\r\n    });\r\n    console.log(`Response: ${response.status}`);\r\n  } catch (e) {\r\n    console.error(`Error: ${e}`);\r\n  }\r\n});\r\n\r\nconst cancelButton = document.querySelector(\"#cancel\");\r\ncancelButton.addEventListener(\"click\", () => {\r\n  controller.abort();\r\n  console.log(\"Canceled fetch\");\r\n});<\/code><\/pre>","category_id":"12","is_private":"0","created_at":"2025-01-27T11:23:39.000000Z","updated_at":"2025-01-29T11:13:24.000000Z","category":{"id":12,"user_id":"1","name":"Javascript","slug":"javascript-xplw","parent_id":null,"created_at":"2023-03-23T02:24:43.000000Z","updated_at":"2023-03-23T02:24:43.000000Z"},"user":{"id":1,"name":"R GONDAL","email":"rizikmw@gmail.com","email_verified_at":null,"two_factor_confirmed_at":null,"current_team_id":"1","profile_photo_path":null,"created_at":"2023-03-12T10:49:33.000000Z","updated_at":"2025-01-10T12:59:00.000000Z","profile_photo_url":"https:\/\/ui-avatars.com\/api\/?name=R+G&color=7F9CF5&background=EBF4FF"}},"pageDesc":"Sync: Code run in sequence, Each next instruction wait to execute Next one. Console.log(\"1\"); Console.log(\"2\"); Console.log(\"3\"); Output:&nb - Async await in Javascript ||Sync, Async, Callback, Promise, Aync await, Fetch Api (Updated: January 29, 2025) - Read more about Async await in Javascript ||Sync, Async, Callback, Promise, Aync await, Fetch Api at my programming site [SITE]","categories":[]}