async - await In JavaScript In Hindi | JS async - await In Hindi

If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.

JS async - await

Understanding Asynchronous

जैसा कि हम जानते हैं , कि JavaScript Synchronous language है , इसका मतलब है कि अगर किसी statement को execute करने के लिए wait करना पड़ा रहा है तो , तो js engine उस statement को skip करके आगे का code execute कर देगा , और skip किया हुआ code बाद में run होगा ।

For Example

Copy
console.log("Start");
   
// wait for 1 second.
setTimeout(function(){
  console.log("Running ...");
}, 1000);

console.log("End");

Output

Start
End
Running ...

output में आप देख सकते हैं कि जिस order में code लिखा गया उसके accordingly result नहीं मिला है इसी behavior को Asynchronous कहते हैं।

और developing के time पर हमारे पास ऐसी कई conditions होती है , जहाँ पर हमें Asynchronous behavior को control करना पड़ता है , जैसे database से data fetch करते समय या कोई API call करते time हम नहीं चाहेंगे कि ये statements skip होकर उससे आगे के statements run हो जाये।

Well , Asynchronous behavior को हम javascript में 3 तरह से handle करते हैं -

• Using Promise() Contructor

• Using Callback Functions

• Using async - await

और इस blog में हम async - await के बारे में बात करेंगे।

JS async await

async - await functions को use करने का main purpose promises को easy तरीके से use करने का था , या कह सकते हैं कि async - await functions , promise() constructor का replacement है।

इस तरह के function को define करने के लिए function से पहले aync keyword का use किया जाता है , और function call करने के बाद आप then() , catch() का use कर सकते हैं।

JS async await Syntax

Copy
async function function_name() {
  // code..
  return something.
}

// while calling
function_name()
.then(result => console.log(result))
.catch(error => console.log(error));

JS async example

Copy
async function sayHi() {
  return "Hi";
}

// while calling
sayHi()
.then(result => console.log(result))
.catch(error => console.log(error));

Output

Hi

ध्यान रहे , जब भी async function कोई value return करता है तो internally Promise object ही return करते हैं ।

For Example , ऊपर दिए गए example को आप कुछ इस तरह से भी लिख सकते हैं।

Copy
async function sayHi() {
  return Promise.resolve("Hi");
}

sayHi()
.then(result => console.log(result))
.catch(error => console.log(error));

// Output : Hi

JS await

await keyword को हमेशा async function के अंदर ही use किया जाता है , await keyword किसी function के execution को तब तक रोके रखता है जब तक वह function किसी promise को resolve नहीं करता है।

await Syntax

Copy
let value = await promise;

JS async await example

जैसा कि आपने ऊपर भी पढ़ा की async - await के through आप code को synchronously भी run कर सकते हैं , तो async - await के example में हम javascript का setTimeout() function का use करके देखेंगे।

Copy
async function showMessage() {
  console.log('Calling');
  let promise = new Promise(function(resolve, reject) {
    setTimeout(() => {
      resolve("Resolved");
    }, 2000);
  });
  
  let result  = await promise;
  return result
}

showMessage()
.then(result => console.log(result))
.catch(error => console.log(error));

Output

Calling
Resolved

हालाँकि किसी promise में reject argument optional है तो इसे आप skip कर सकते हैं , अगर आप चाहे तो आप error pass कर सकते हैं।

Other async - await Example

ये जरूरी नहीं कि async function को then() fucntion का use करके ही handle करें
।

For Example

Copy
function resolveFunction() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}

async function asyncCall() {
  console.log('Calling');
  const result = await resolveFunction();
  console.log(result);
}

asyncCall();

Output

Calling
Resolved

जैसा कि आप पढ़ा कि , जब भी async function कोई value return करता है तो internally Promise object ही return करते हैं, आप किसी Promise की जगह directly किसी async function को भी call कर सकते हैं -

Example

Copy
async function sayHi() {
  return "Hi";
}

async function displayHi() {
  const result = await sayHi();
  console.log(result);
}

displayHi(); // hi

हालाँकि sayHi() function कोई delay नहीं कर रहा है तो call करते time use किये गए await को remove भी कर सकते हैं , लेकिन delay कर रहा होता तो ये mandatory होता।

आपको JavaScript में async - await function के बारे में अच्छे से समझ आ गया होगा।