hindi angular script

Start -------->

Hi friends welcome back to target developers आज का टॉपिक है -

Why Async Await in javascript/typescript ?

toh aaj ke video mai cover krenge -

1. synchronous and asynchronous mai difference आखिर है क्या ?
2. Promise आखिर है क्या ?
3. Async Await की एंट्री ?
4. understand with code ?
5. error handling ?
6. Understand with story ?
7. Real world application ?

वीडियो को आखिर तक देखिएगा, क्योंकि last में मैं एक ऐसा example दूंगा जिससे aapka

sara confusion दूर हो jayga।

Toh chaliye shuru krte hai

भाग 1: synchronous और asynchronous का difference

सबसे पहले समझते हैं सिंक्रोनस और असिंक्रोनस का मतलब ?

suppose kriye, आपने अपने friend को कॉल किया और जब तक वो कॉल पिक नहीं करता, आप बस फोन पर इंतजार करते रहते हैं। ये हुआ synchronous तरीका।

scenario 2
अब, अगर आप अपने friend को कॉल करते हैं और जवाब आने तक दूसरे काम करने लगते हैं, ये है asynchronous तरीका।

प्रोग्रामिंग में भी ऐसा ही होता है।

synchronous में, कोड एक के बाद एक चलता है। लेकिन अगर कोई काम ज्यादा समय ले रहा है, तो पूरा प्रोग्राम वहीं रुक जाता है।

वहीं, asynchronous में प्रोग्राम आगे बढ़ता रहता है, बिना रुके।

यही कारण है कि Async Await इतना जरूरी है।

भाग 2: प्रॉमिस (Promise) क्या है?

अब सवाल आता है कि Async Await कैसे काम करता है?

इसके लिए हमें पहले समझना होगा Promise ?

Promise एक वादा है।

जैसे मान लीजिए, आप friend से कहते हैं कि वो शाम को पिज्जा लेकर आएगा।

अब friend तीन चीजें कर सकता है:

friend पिज्जा लेकर आएगा - Promise Resolved।

friend कहेगा कि पिज्जा नहीं ला सकता - Promise Rejected।

or friend अभी कुछ न बोले, आप इंतजार करें - Pending।

Promise का यही रोल होता है कोड में। ये बताता है कि कोई काम होगा, और उसके बाद हमें एक result मिलेगा।

भाग 3: Async Await की entry

अब आता है असली hero, Async Await।

अगर प्रॉमिस वादा करता है, तो Await उस वादे का result आने तक इंतजार करता है,

और Async ये Ensure करता है कि प्रोग्राम रुके नहीं। इसका मतलब, आप इंतजार भी करेंगे और दूसरे काम भी बिना किसी रुकावट के चलते रहेंगे।

भाग 4: code example से समझते हैं

चलो, इसे एक code example से समझते हैं।

suppose kriye ki हमें एक सर्वर से डेटा लाना है।

aap code dekh sakte hai ki humne ynha per ak getdata function
banaya and uske ander fetchdatafromserver function call kiya hai
and fetchdatafromserver function ka kaam hai api call krna.
And hum final result data variable mai hold kr rhe hai.

Phir next line mai data ko console kra rhe hai.

function getData() {
let data = fetchDataFromServer();
console.log(data); //object promise object
}

to dosto yah ak synchronous code hai kyuki yaha fetchDataFromServer function ko synchronous तरीके से कॉल किया गया है means without await.

यदि fetchDataFromServer एक प्रॉमिस रिटर्न करता है तो यह Promise का ऑब्जेक्ट लौटाएगा, न कि actual डेटा ।

app jab console.log krenge to aapko Promise का ऑब्जेक्ट print hoga.

ydi fetchDataFromServer function server se data lane mai slow hai
to apka poora code code crash hojayga or stop hojayga.

लेकिन अगर हम इसे Async Await के साथ लिखें -

async function getData() {
let data = await fetchDataFromServer();
console.log(data); // print actual data from api
}
to dosto yah ak asynchronous code hai kyuki yaha fetchDataFromServer function ko asynchronous तरीके से कॉल किया गया है means with await.

async function को यह बताता है कि यह एक asynchronous process को संभाल सकता है और promise return krega

await तब तक function को pause कर देता है जब तक fetchDataFromServer() का प्रॉमिस resolve नहीं हो जाता means jab tk actual data nhi mil jata लेकिन प्रोग्राम का बाकी part बिना रुके चलता रहेगा।

इसका मतलब यह है कि data में सीधे actual data स्टोर होगा, और फिर
console.log(data); सही डेटा प्रिंट करेगा।

भाग 5: Error Handling भी जरूरी है

Async Await के साथ एक खास बात ये है कि आप try-catch ब्लॉक का इस्तेमाल करके error को आसानी से हैंडल कर सकते हैं।

async function getData() {
try {
let data = await fetchDataFromServer();
console.log(data);
} catch (error) {
console.error("कुछ गलती हो गई:", error);
}
}

भाग 6: कहानी से समझते हैं

अब इसे एक आसान कहानी से समझते हैं।
मान लीजिए, आप एक रेस्टोरेंट में गए। आपने पिज्जा ऑर्डर किया।

वेटर ने आपका ऑर्डर लिया (Function Call)।
पिज्जा बनने लगा (Promise)।
अब आप खाना आने का इंतजार कर रहे हैं (Await)।
आखिरकार वेटर पिज्जा लेकर आता है (Promise Resolved)।
अगर पिज्जा नहीं बना, तो वेटर मना कर देता है (Promise Rejected)।
Async Await प्रोग्रामिंग में ठीक ऐसा ही करता है। ये हमें इस इंतजार को मैनेज करने में मदद करता है।

भाग 7: रियल वर्ल्ड एप्लिकेशन

दोस्तों, Async Await का सबसे बड़ा फायदा तब होता है जब आप API से डेटा फेच कर रहे हों, फाइल्स read kr rhe हों या डेटाबेस से कुछ access कर रहे हों। इससे आपका कोड क्लीन और आसान हो जाता है।

भाग 8: अंत में

तो दोस्तों, Async Await का ये सफर यहीं खत्म होता है। उम्मीद है, अब ये टॉपिक आपको आसान लग रहा होगा। अगले वीडियो में हम Promises और Callbacks की तुलना करेंगे।

वीडियो अच्छा लगा हो तो लाइक कीजिए, अपने दोस्तों के साथ शेयर कीजिए और चैनल को सब्सक्राइब करना मत भूलिए।

मिलते हैं अगले वीडियो में, तब तक के लिए कोडिंग करते रहिए और सीखते रहिए। धन्यवाद!

===============================

तो दोस्तों, ये थीं 10 आम गलतियां जो TypeScript में async/await इस्तेमाल करते वक्त लोग करते हैं। अगर आप भी इनमें से कोई गलती कर रहे थे, तो अब आप सीख गए हैं। वीडियो को लाइक और चैनल को सब्सक्राइब करना न भूलें। मिलते हैं अगले वीडियो में। धन्यवाद!

==========================================================================

स्क्रिप्ट: 10 आम गलतियां जो TypeScript में async/await इस्तेमाल करते वक्त लोग करते हैं

इंट्रो (0:00 - 1:00):
नमस्ते दोस्तों!
क्या आप TypeScript में async/await का सही इस्तेमाल करना चाहते हैं? लेकिन क्या आप जानते हैं, कई लोग इसमें छोटी-छोटी गलतियां करते हैं, जो उनके कोड को स्लो और गलत बना देती हैं? आज के इस वीडियो में, हम जानेंगे 10 ऐसी आम गलतियां जो आप भी शायद कर रहे होंगे।
तो वीडियो को आखिर तक जरूर देखिए, क्योंकि अंत में मैं एक बोनस टिप भी देने वाला हूं जो आपकी कोडिंग स्किल्स को लेवल-अप कर देगी।

1. केवल async लिखना और await भूल जाना (1:00 - 3:00) सबसे पहली और बड़ी गलती जो लोग करते हैं, वो है async फ़ंक्शन तो लिख लेते हैं लेकिन अंदर await इस्तेमाल करना भूल जाते हैं। मान लीजिए, आपने एक API कॉल बनाई:

typescript
Copy code
async function fetchData() {

fetch('https://api.example.com/data');

}
अब आपको क्या लगता है, ये सही है? गलत!
क्योंकि आपने fetch के रिजल्ट को वेट नहीं किया। इससे आपका कोड बिना डेटा के आगे बढ़ जाएगा। सही तरीका है:

typescript
Copy code
async function fetchData() {

const response = await fetch('https://api.example.com/data');

}
देखा? await लगाने से अब ये सही काम करेगा।

1. Error handling करना भूल जाना (3:00 - 5:00) आपने देखा होगा, कई बार लोग ट्राय-कैच (try-catch) ब्लॉक का इस्तेमाल नहीं करते। अगर आपकी API कॉल फेल हो गई तो क्या होगा? प्रोग्राम क्रैश कर जाएगा। सही तरीका है:

typescript
Copy code
async function fetchData() {

try {

const response = await fetch('https://api.example.com/data');

} catch (error) {

console.error('Error:', error);

}

}
अब अगर एरर आएगी, तो आपका कोड संभल जाएगा।

1. एक साथ कई async ऑपरेशंस को await करना (5:00 - 7:00) अब सोचिए, अगर आपके पास तीन API कॉल्स हैं, और आप हर कॉल को अलग-अलग await करते हैं:

typescript
Copy code
const data1 = await fetch('url1');

const data2 = await fetch('url2');

const data3 = await fetch('url3');
ये काफी टाइम लेगा। लेकिन हम इसे साथ में भी चला सकते हैं:

typescript
Copy code
const [data1, data2, data3] = await Promise.all([

fetch('url1'),

fetch('url2'),

fetch('url3')

]);
देखा? एक साथ सारे कॉल्स फटाफट हो गए।

1. Async फ़ंक्शन में return करना भूल जाना (7:00 - 9:00) लोग अक्सर async फ़ंक्शन में कुछ रिटर्न करना भूल जाते हैं। अगर आपने लिखा:

typescript
Copy code
async function getData() {

await fetch('url');

}
तो ये कुछ भी रिटर्न नहीं करेगा। सही तरीका है:

typescript
Copy code
async function getData() {

const response = await fetch('url');

return response.json();

}
अब जब ये फंक्शन कॉल होगा, ये डेटा रिटर्न करेगा।

1. Nested async/await लिखना (9:00 - 11:00) कई बार लोग async/await को नेस्टेड बना देते हैं, जिससे कोड बहुत गन्दा हो जाता है।

typescript
Copy code
async function main() {

const result = await someFunction(async () => {

return await anotherFunction();

});

}
इसे सिंपल बनाइए:

typescript
Copy code
async function main() {

const result = await anotherFunction();

}

1. बड़ी फाइल्स में async/await का गलत इस्तेमाल (11:00 - 13:00)
   कभी-कभी async/await के साथ लंबे-लंबे फंक्शंस लिखे जाते हैं, जो समझना मुश्किल हो जाता है। हमेशा छोटे-छोटे फंक्शंस बनाएं। इससे कोड पढ़ने और डिबग करने में आसानी होगी।

2. Unhandled Rejections (13:00 - 15:00)
   अगर आप किसी भी async फ़ंक्शन के रेजेक्शन को हैंडल नहीं करते, तो यह एक बहुत बड़ी गलती है। इसे हमेशा संभालिए।

3. async/await और .then() को मिक्स करना (15:00 - 17:00)
   कभी-कभी लोग async/await के साथ .then() का इस्तेमाल करते हैं।

typescript
Copy code
async function getData() {

const response = await fetch('url').then(res => res.json());

}
ये सही तरीका नहीं है। केवल await का इस्तेमाल करें।

1. Async Loops में await का गलत इस्तेमाल (17:00 - 18:30)
   फॉर-लूप में await गलत तरीके से लगाने पर परफॉर्मेंस स्लो हो जाती है। सही तरीका है Promise.all() का इस्तेमाल।

2. सही Testing न करना (18:30 - 19:30)
   लोग async/await को टेस्ट करना भूल जाते हैं। हमेशा यूनिट टेस्टिंग करें ताकि आपका कोड सही से काम करे।

बोनस टिप (19:30 - 20:00):
जब भी async/await का इस्तेमाल करें, अपनी कोडिंग को सिंपल और क्लीन रखें। इससे आपका काम आसान होगा।

आउट्रो (20:00):
तो दोस्तों, ये थीं 10 आम गलतियां जो TypeScript में async/await का इस्तेमाल करते वक्त लोग करते हैं। अगर आप इनसे बचेंगे, तो आपका कोड तेज और बेहतर काम करेगा।
अगर आपको वीडियो पसंद आया हो, तो लाइक करें, चैनल को सब्सक्राइब करें, और कमेंट करके बताएं कि आप अगला वीडियो किस टॉपिक पर देखना चाहते हैं।
धन्यवाद, मिलते हैं अगले वीडियो में!