async await hindi script

https://chatgpt.com/c/67335967-dc14-8007-8301-240c33f8c007

[Opening Scene]
[Background Music] [Camera on Host]

Host:
आज हम बात करेंगे TypeScript में async/await के बारे में।
aaj ham एक aise tool k baare mai discuss krenge जो आपकी asynchronous programming की saari problem ka solution nikal सकता है! 🚀 अगर आप callback hell से बाहर निकलना चाहते हैं या अपने promises को बेहतर तरीके से हैंडल करना चाहते हैं, ya अपने कोड को ज्यादा readable और maintainable बनाना चाहते हैं, तो ये वीडियो आपके लिए है। इस वीडियो में हम async/await के हर scenario को detail mai समझेंगे, और साथ mai real-world examples भी discuss krenge। तो चलिए, शुरू करते हैं!

[Scene 1: Synchronous vs Asynchronous code]

pahle ham baat krte hai synchronous and asynchronous code kaam kaise krte hai. dosto yah bahut important point hai isko dhyan se samjhna.

console.log("Start");
console.log("Processing...");
console.log("End");

Output comes in a sequence: "Start", "Processing...", "End".

aap screen mai dekh sakte hai yah ak synchronous code hai.
dosto synchronous code line by line execute hote hai.

यहां हम देख सकते हैं, पहले 'Start' print होगा, फिर 'Processing...' और last में 'End'. इस तरह, एक line दूसरे line के बाद ही execute hoti है।

console.log("Start");

setTimeout(() => {
console.log("Processing...");
}, 2000);

console.log("End");

Output is: "Start", "End", "Processing..." (after 2 seconds).

Ab hamne dosto sychronous code ko asynchronous code mai convert kiya hai aap asynchronous code screen per dekh sakte hai.

तो dekhiye dosto yah per 'End' पहले print hoga और phir 'Processing...' दो सेकंड बाद आता है। इसका मतलब setTimeout function ने एक टाइमर सेट किया और बाकी के code को block नहीं किया।"

इससे हमें ये yah समझ में आता है कि asynchronous code का फायदा यह है कि यह लंबे समय तक चलने वाली operations like api calls को handle कर सकता है bina baaki code part ko block kiye.

इस asynchronous behavior को manage करने के लिए promises or async/await का use किया जाता है।

[Screen shows: Synchronous vs Asynchronous code]

[Scene 2: Promises ?]

ham aage badne se pahle promise k baare mai jaan lete hai
toh dosto Promise एक ऐसा object है जो asynchronous operations के लिए result provide करता है Ab yah result 3 states mai ho sakte hai 1st state Pending (Initial State) 2nd state Fulfilled (Success) 3rd state Rejected (Failure).

Ab ham in state k baare mai samjh lete hai

pending or initial state means jab ham promise create krte hai tab uski initial state pending hoti hai and yah ae show krta hai ki asynchronous operation पूरा नहीं हुआ है

Fulfilled (Success) means अगर asynchronous operation successfully complete हो गया, तो Promise 'Fulfilled' state में चला जाता है। इस case में एक value या result मिलता है

Rejected (Failure) means अगर asynchronous operation fail हो गया, तो Promise 'Rejected' state में चला जाता है। इस case में हमें error मिलता है

How to create promise ?

ab ham example k sath samjhte hai promise create kaise krte hai

let promise = new Promise((resolve, reject) => {
let success = true; // इसे try/catch से simulate कर सकते हैं
if (success) {
resolve("Operation Successful");
} else {
reject("Operation Failed");
}
});

promise
.then((result) => console.log(result)) // Fulfilled case
.catch((error) => console.log(error)); // Rejected case

इस code में हमने एक Promise बनाया। अगर success true है, तो resolve call होगा और message print होगा: 'Operation Successful'।
लेकिन अगर operation fail हो गया, तो reject call होगा और हमें error मिलेगा: 'Operation Failed'।

फिर हमने .then और .catch का use करके promise के result को handle किया।

ab ham aage badne se pahle asynchronous operation hote kya hai un per discuss kr lete hai

Asynchronous operations वो operations होते हैं जो background में चलती हैं, और main program execution को block किए बिना अपना काम पूरा करती हैं। जब ये operations complete हो जाती हैं, तो हमें result provide करती हैं

like -

1. Fetch data from an API. (asynchronous operation)
2. Process the fetched data.(asynchronous operation)
3. Save the processed data.(asynchronous operation)

How to Handle multiple asynchronous operation ?

Now, imagine you have a sequence of operations where each operation depends on the result of the previous one:

1. Fetch data from an API. (asynchronous operation)
2. Process the fetched data.(asynchronous operation)
3. Save the processed data.(asynchronous operation)

yah per har ak asynchronous operation dependent hai doosre asynchronous operation per.

Ab hamare paas teen tarike hai asynchronous operation ko handle krne k liye aur ham aage janenge kause best tarika hai

Using Callback
Using Promise
Using async/await

ab ham aage badne se pahle callback kya hota hai samjh lete hai
dosto -
callback ek aise function ko kehte hain jo kisi doosre function ko argument ke form mein diya jaata hai, aur jab zarurat padti hai tab wo function usse call karta hai
example -

function doSomething(callback: () => void) {
  console.log("Doing something...");
  callback(); // Call the callback
}

function onDone() {
  console.log("Done!");
}

// Use the function with a callback
doSomething(onDone);

Iska matlab hai ki ek function ke andar doosra function "wapas bulane" (call back karne) ke liye diya jaata hai. Callback ka use zyada tar asynchronous operations (jaise ki data fetch karna, file read karna, etc.) ke liye kiya jaata hai.

fetchData(data1, (result1) => {
  processData(result1, (result2) => {
    saveData(result2, (result3) => {
      console.log(result3);
    });
  });
});

aap screen per code dekh sakte hai yah per teen asynchronous operation ho rahe hai -
fetch data()
processData()
savedData()

aur yah teeno operation ak doosre per dependent hai means jab ham fetch karenge data api se uske baad he ham usko process kar sakte hai and process krne ke baad he ham usko save kr sakt hai.

lkin dosto jab aap is code k structure ko dekhte hai to yah ak complex structure hai like a tree and isi structure ko ham call back hell kehte hai जहां readability और maintainability काफी मुश्किल हो जाती है

ab dosto iss code ko promise chains mai convert krte hai to aap dekh sakte hai code screen per

fetchData()
  .then(result1 => processData(result1))
  .then(result2 => saveData(result2))
  .then(result3 => {
    console.log(result3);
  })
  .catch(error => {
    console.error(error);
  });

ydi aap iss code ko callback hell code se compare krenge to aap observe krenge ki yah per ham then function ka use kr rhe hai jo code ki readability improve kr rha hai compared to callback but not fully and also error handling abhee bhee muskil hai handle krna.

to chaliye ab ham jante hai 100% code radability and mainainabilty and proper error handling kaise achieve kr sakte hai -

[Scene 3: What is async/await?]
Host:
"अब आते हैं async/await पर। async/await JavaScript और TypeScript का syntax है, जो asynchronous code को synchronous जैसे दिखाता है। यह Promise-based operations को ज्यादा readable और clean बना देता है।"

[Screen shows: Simple async/await example]

Host:
"आप देख सकते हैं, async function में हम await का use करते हैं जिससे code sequentially execute होता है जैसे कि हम synchronous code लिख रहे हों।"

[Scene 4: The async Keyword]
Host:
"चलिये अब बात करते हैं async keyword के बारे में। जब हम किसी function के सामने async लगाते हैं, तो वो function automatically एक Promise return करता है। इसका मतलब अगर आप कोई value return करेंगे, तो वो value Promise के अंदर encapsulate हो जाएगी।"

[Screen shows: Async function example]

Host:
"आप देख सकते हैं, यहां एक async function है, जो एक Promise return कर रहा है, भले ही हमने explicitly Promise नहीं लिखा।"

[Scene 5: The await Keyword]
Host:
"अब await keyword की बात करते हैं। await का use हम तब करते हैं जब हम चाहते हैं कि हमारा code एक asynchronous operation के result का इंतजार करे।"

[Screen shows: Await example with setTimeout]

Host:
"आप देख सकते हैं, await किसी Promise के resolve होने तक code को pause कर देता है, और जैसे ही result मिलता है, execution आगे बढ़ता है।"

[Scene 6: Error Handling with async/await]
Host:
"अच्छा, अब बात करते हैं error handling की। जब हम asynchronous operations करते हैं, तो हमें errors handle करने के लिए proper strategies adopt करनी पड़ती हैं।"

[Screen shows: Try/catch with async/await example]

Host:
"यहां try/catch block का use करके हम errors को easily handle कर सकते हैं। अगर कोई error आए, तो catch block उसे पकड़ लेता है।"

[Scene 7: Chaining async/await]
Host:
"अब बात करते हैं chaining की। अगर हमें multiple async operations को execute करना हो, तो हम उन्हें await के साथ चेन कर सकते हैं।"

[Screen shows: Multiple async/await functions]

Host:
"यहां हमने तीन async functions को sequentially execute किया है, जिससे हम एक के बाद एक operations handle कर सकते हैं।"

[Scene 8: Returning Values from async Functions]
Host:
"जब हम async function से कोई value return करते हैं, तो वो value एक Promise के अंदर wrapped होती है।"

[Screen shows: Return value from async function]

Host:
"अगर हम किसी async function से कोई string return करते हैं, तो वो Promise string return करता है। इसका मतलब आपको हमेशा .then() या await के साथ उस result को access करना होगा।"

[Scene 9: Parallel Execution with async/await]
Host:
"कभी-कभी हमें multiple asynchronous tasks parallelly execute करने होते हैं। इसके लिए हम Promise.all() का use करते हैं।"

[Screen shows: Example using Promise.all]

Host:
"यहां हम तीन अलग-अलग API calls को parallelly execute कर रहे हैं, ताकि वे एक साथ execute हो सकें और time saving हो सके।"

[Scene 10: Working with TypeScript Types]**
Host:
"अब बात करते हैं TypeScript में async/await को type safe बनाने की। TypeScript में हम async functions के return types को type करके उन्हें ज्यादा readable और maintainable बना सकते हैं।"

[Screen shows: Typing async function example]

Host:
"यहां हम return type को Promise के रूप में define कर रहे हैं, जिससे कि हमें पता चले कि async function number type का value return करेगा।"

[Scene 11: Common Mistakes with async/await]
Host:
"अब हम कुछ common mistakes के बारे में बात करते हैं। सबसे बड़ी गलती होती है await का use न करना।"

[Screen shows: Mistake example: forgot to await]

Host:
"यहां हमने await का use नहीं किया, और result सही से return नहीं हो रहा। हमेशा await का use करें जब आपको asynchronous operations का result चाहिए।"

[Scene 12: Real-world Use Cases]
Host:
"अब हम कुछ real-world examples देखेंगे। मान लीजिए हमें किसी API से डेटा fetch करना है।"

[Screen shows: API fetch example with async/await]

Host:
"यहां हम एक API से data fetch कर रहे हैं और उसे render करने के लिए async/await का use कर रहे हैं।"

[Scene 13: Async Iterators and for await...of]
Host:
"अगर हमें एक asynchronous iterable के ऊपर iterate करना हो, तो हम for await...of loop का use कर सकते हैं।"

[Screen shows: Async iterators example]

Host:
"यहां हम for await...of का use करके एक asynchronous collection को loop कर रहे हैं।"

[Scene 14: Unit Testing with async/await]
Host:
"अगर हम async functions का unit test करना चाहते हैं, तो Jasmine या Jest जैसी testing libraries में async/await का use कर सकते हैं।"

[Screen shows: Testing async function in Jasmine]

Host:
"यहां हम async function को test कर रहे हैं, और await का use करके हम expected result compare कर रहे हैं।"

[Scene 15: Conclusion and Best Practices]
Host:
"तो दोस्तों, इस वीडियो में हमने async/await के बारे में बहुत कुछ सीखा। हमने देखा कि कैसे async/await asynchronous code को synchronous जैसा बना देता है, और इसे readable और maintainable बनाता है।"

[Screen shows: Key takeaways]

Host:
"सबसे important बात यह है कि हमें हमेशा await का सही use करना चाहिए, और error handling के लिए try/catch blocks का use करना चाहिए।"

Host:
"अगर आपको ये वीडियो पसंद आया हो, तो please like करें, subscribe करें और bell icon दबाएं ताकि आपको हमारी नई videos की notifications मिलती रहें। धन्यवाद!"

[Closing Scene]
[Background Music fades out]