Up next in 10
Promise .then() and .catch() _ JavaScript Tutorial in Hindi #55
28 views
Feb 10, 2024
Embark on a journey into the heart of asynchronous JavaScript programming with the 55th installment of our tutorial series presented in Hindi. In this tutorial, discover the power of .then() and .catch() methods in handling Promises effectively. Gain practical insights into how these methods can streamline your code, making it more robust and error-resistant. This session provides a step-by-step guide, complete with examples in Hindi, ensuring that you grasp the concepts of handling successful and failed asynchronous operations seamlessly. Whether you're a JavaScript enthusiast or a developer looking to refine your skills, this tutorial is your gateway to mastering the art of Promises and their associated methods. Join the session, enhance your understanding, and elevate your proficiency in asynchronous JavaScript programming!
View Video Transcript
0:00
Guys, आज के इस वीडियो में हम लोग देखेंगे कि जब एक promise fulfill हो जाती है
0:03
as resolved या फिर as rejected, तब किस तरह से हम कुछ काम कर सकते हैं
0:08
For example, हम चाहेंगे कि अगर एक promise fulfill हो जाएं, तो आपको, let us say, एक alert मारना है
0:15
या फिर आपको कोई और काम करना है, आपको कोई दूसरा function call करना है, तो ये सारे काम आप लोग कैसे करोगे, ये देखेंगे, इस वीडियो में dot then और dot catch दो methods होते हैं, चलते हैं computer screen में, and let's get started
0:25
गैस पिछले वीडियो ने बहुत ज़्यादा आतंक मचाया आप मेंसे कई लोगों ने प्रॉमिस पे सवाल उठाया और मैं बहुत खुश हूँ कि आपने सवाल उठाये होगी उन सवालों का जवाब अब मैं आप लोगों को दे पाऊंगा बहुत अच्छे से और मुझे पता �
0:55
ताकि एक चीज एसिंग्रोनेस ली हो सके खुल मिलाकर यह बात है और आप अपनी कस्टम प्रॉमिसेस बना सकते हो अ�
1:04
मैं आपको यहां पर बताता हूं मैं एक रैपल बना लेता हूं सबसे पहले और मैंने एश्टीमल सीएस जावास्कॉट्�
1:10
बनाऊंगा ताकि थोड़ा आपको ब्राउजर वाली फील आए ठीक है और यह है हमारा वीडियो नंब�
1:16
कौन सा है बाई साब 55 वीडियो नंबर है यह हमारा 55 underscore then
1:23
catch इस नाम से मैं एपल बनाऊंगा अब देखो सबसे वहले मैं आप लोगों को य�
1:28
बताना चाहता हूँ कि promise मुश्किल नहीं है और उसका proof है यहाँ पर आप simply क्या कर�
1:33
script खोल कर यहाँ पर लिखो let p is equal to new promise और इसके बा�
1:40
आप लोग को लिखना है resolve reject यह भाई है syntax यह ना मैंने बनाया ह�
1:45
ना शायद आपके पड़ोसी ने बनाया होगा हो सकता है आप उसके पड़ोस में रहते हो जिसने बनाया ह�
1:51
लेकिन वो एक अलग बात है 90% लोगों के 99% लोगों के पड़ोसी नहीं बनाया ह�
1:55
तो ये एक syntax है जो कि हमें follow करना है अब promise का syntax क्या कहता ह�
2:00
कहता है आप इसके अंदर जो भी चीज़ करोगे वो background में execute हो जाएग�
2:04
क्या होगा वो background में execute हो जाएगी और जब वो execute हो चुकेग�
2:10
तब क्या होगा तब आपको notify कर दिया जाएगा कैसे .then और .catch की साहिता स�
2:17
promise क्या होती है promise promise of code execution होता है promise की एक state होती ह�
2:22
जैसे कि मैं इस promise के अंदर अगर माल लो set timeout डाल दू�
2:26
और मैं कुछ ऐसा करूँ मैं कहूँ की भाई देखो ऐसा है इसको run करना 4 seconds के बा�
2:33
या 5 seconds के बाद और करना कुछ मत बस alert कर देन�
2:37
कि I am a promise and I am fulfilled ठीक है अब fulfilled का मतलब क्या ह�
2:44
resolve का मतलब क्या है reject का मतलब क्या है fulfill का मतल�
2:48
कि भाई आप अब उससे निबट चुके हो जैसे मालो Zomato का आपने order place किय�
2:52
कि भाई ये दो आलो के पराठे ला दो अब आपका अगर वो आलो का पराठे नहीं ला पाय�
2:57
मालो ये हुआ कि भाई sorry sir आलो का पराठे नहीं है Zomato support ने आपसे क�
3:01
हम आलू का पराठा नहीं ला सकते यह आपका रिफर्ट आ गया अब आपका ओर्डर फुल्फिल हो चुका ह�
3:06
अब हमारा आपसे कोई मतलब नहीं है मतलब इस ओर्डर के लिहास से कोई मतलब नहीं ह�
3:10
रिजॉल्व का क्या मतलब है ये लीजे सर ये आपका आलू पराठा खा लीजे इसक�
3:14
reject का क्या मतलब है reject का मतलब है कि आपका आलू का पराठा नहीं मिलेग�
3:19
अब fulfillment हो सकता है या तो resolve करके है या reject करके या तो आपका आलू पराठा मिला या नहीं मिल�
3:24
आप इंतजार कर रहे हो बैठे हुए आलू पराठा मिलेगा आलू पराठा मिलेगा आपकी promise अभी pending ह�
3:29
क्या ये चीज simple नहीं है क्या ये चीज simple नहीं है मुझे तो लगता है बहुत simple है आ�
3:34
अब मैं यहाँ पर क्या करूँगा मैं console.log करूँगा यहाँ पर लिखूँगा promise is pending ठीक है और यहाँ पर मैं लिखूँगा एक काम करता हू�
3:44
मैं लिखता हूँ console.log I am a promise and I am fulfilled और fulfill करने के लिए मुझे क्या करना पड़ेग�
3:52
मुझे resolve को call करना पड़ेगा और किस value के साथ मैं इसको fulfill करना चाहता हू�
3:58
मानलो मैं true value के साथ इसको, यह जो Boolean मेरा true है
4:02
उसके साथ fulfill करना चाहता हूँ, तो मैं कर सकता हूँ, मैं extreme के साथ fulfill कर सकता हूँ
4:06
fulfill code promises pending immediately print set time out
4:17
चलेगा लेकिन ये promise अभी तक pending state में रहेगी और जैस�
4:23
ही हमारी ये जो promise है वो resolve हो जाएगी आप लोग को ये console
4:29
में देखने को मिल जाएगा, मैं आपको दिखाता हूँ यहाँ पर, आप देखो यहाँ पर, promises pending लिख कर आ रहा है, और 5 second के बाद, I am a promise and I am fulfilled, अगर मैं immediately इस promise को यहाँ पर लिखूँ, console.logp, immediately लिखूँ अगर, तब क्या होगा, अगर मैं immediately लिखूँ तो यह promise pending है, which is true, अभी �
4:59
अगर ये resolve हो चुकी होती तब आप लोग को यहाँ पर इसक�
5:03
result देखने को मिलता समझ नहीं हो आप लोग तो अब मैं यहाँ पर क्या करूँगा आप लोग को एक और catch करके दिखाऊंग�
5:09
अब वो क्या होगा resolve ना होगे मैं इसको reject करूँगा promise को ठीक है और मैं लिखूंगा reject और new error मैं इस तरह से error throw कर सकता हूँ javascript मे�
5:20
और यहाँ पर लिख दूँगा I am an error please bear with me मैंने आपलोग को error अभी बढ़ाया नहीं ह�
5:26
but आप ये समझ लो कि नए error को throw करने के लिए इस syntax का इस्तेमाल किया जाता है ठीक ह�
5:32
new error को throw करने के लिए इस syntax का इस्तेमाल किया जाता है अब इसको ज़रा run करते है�
5:37
रिलोड करके दिखाता हूँ आप लोग को promise is pending wait कर रहे है�
5:42
wait कर रहे हैं wait कर रहे हैं 5 second के बाद I am a promise and I am fulfilled लिखकर आ गय�
5:47
लेकिन यहाँ बार लिखकर आ रहा है and caught in promise क्योंकि इस promise ने एक error throw कर दिय�
5:51
ठीक है मुझे technically इसको rejected लिखना चाहिए नहीं तो यह बात गलत हो जाएगी क्योंकि अभी reject कर रहा हूँ मैं इस promise क�
5:58
तो promise या तो resolve हो सकती है या reject हो सकती है resolve जब होगी तब एक value देग�
6:03
reject जब होगी तो एक error देगी सिंपल सी बात है और ये code का execution
6:07
एकदम parallel ही चलेगा अच्छा कर मैं 10 promises बना लूँ मालो एक मै�
6:11
और promise बना लूँ मैं इस code को इस रेप्लिकेट मार दूँ पूरा यहाँ पर और मैं इसक�
6:15
p1 p2 कर दूँ कि वाई यह promise 1 है यह promise 2 है और मैं exactly same चीज करूँ पहल�
6:21
प्रॉमिस मेरी हो रही है रिजॉल्व और दूसरी प्रॉमिस हो रही है मैं इसको रिजॉल्व कर देता हू�
6:29
एडिटल रिजॉल्व और यह रिजक्टेड हो जाएगा इसका रिजॉल्व ट्रूप हो देता हूं रिजेक्ट हो जाएगा यह तो अगर मैं भ�
6:36
पी वन पी टू करूँ पी वन पी टू और इसको run करू�
6:41
तो क्या पी वन और पी टू दस सेकेंड लेंगे चलने में नही�
6:45
दोनों पैलली फाइर कर दिये जाएंगे और पांची सेकेंड के बाद आपको दोनों का result यहाँ पर मिल जाएग�
6:50
तो यही करने के लिए promise यूज होती है कि आपके बास 50 promises ह�
6:55
50 की 50 parallelly execute हो जाएंगे और execution के बाद आप लोग को notify कर दिया जाएग�
7:00
अब मालों मैं यह चाहता हूँ कि यार जैसे ही p1 complete हो जाए तो कोई काम करना ह�
7:05
मैं print नहीं करना चाहता हूँ मैं जाता हूँ p1.then कि वैज़ जब p1 हो जाए त�
7:09
क्या करो यहाँ पर मैं लिखूँगा value ठीक है और इसके बाद मैं क्या करूँग�
7:15
simply उस value को print कर दूँगा value ठीक है और मैं क्या करूँग�
7:25
इसको replicate करूँगा और ये चीज़ P2 के साथ भी करूँगा P2 के साथ भी ये चीज़ करूँग�
7:32
लेकिन एक काम करता हूँ पहले P1 के साथ ही करता हूँ लेकिन P2 तो हमारी reject हो रही है �
7:37
P1 हमारी resolve हो रही है P2 reject हो रही है reload करूँग�
7:41
promise is pending promise is pending that makes a lot of sense 5 second बीतेंग�
7:46
और यहाँ पर देखो कि यह promise resolve हो चुकी लेकिन यह promise reject हो चुकी इसलिए आपको error भी दिखाये जा रहा ह�
7:52
ठीक है technically आप कुछ भी यहाँ पर नहीं करते हो आप सारा काम यहाँ करते हो dot then और dot catch को use करक�
7:58
यहाँ पर console logs हम नहीं करते हैं ठीक है तो हमें भी यहाँ पर क्या करेंग�
8:03
कि p1.then तो मैंने यह कर दिया अब मैं अगर इसको reload करू�
8:07
तो promise is pending पांच सेकिन बीचने दो और इसके बाद देखना यहाँ पर लिख कर आएग�
8:14
इसकी तो value आगई और इसने error throw कर दिया तो console में error आ गया ठीक ह�
8:17
error p2 throw catch error p2 syntax use
8:30
और मैं यहाँ पर simply क्या करूँगा console.log कर दूँगा और यहाँ पर लिखूँग�
8:38
some error occurred in p2 ठीक है इसको save होने देता हू�
8:44
reload करता हूँ और 5 second बीटने के बाद आप लोगों को यहाँ पर देखने को मिलेग�
8:50
true or some error occurred in P2 एक चीज़ notice करी आपन�
8:53
हमने error को catch कर लिया तो हमें console में अब error देखने को नहीं मिल�
8:57
क्योंकि हमने उस error को handle कर लिया ठीक है अब आजाओ या notes मे�
9:01
तो मुझे पता है भी भी confusing है अभी भी आपके दिमाग में confusion होगा तो इसलिए मैं यहाँ से नहीं यहाँ से notes पढ़ना शुरू करूँग�
9:07
और यह चीज हमको reiterate करनी पड़ेगी यार हमें promises समझनी है तो हमें दुबारा आना पड़ेग�
9:11
पीछे और दुबारा समझना पड़ेगा, the solution to the callback hell is promises, कैसे है वो मैं भी थोड़ी देर में बताऊंगा
9:17
promise is a promise of code execution, यह हमने देखा, the code either executes or fails, in both the cases
9:21
subscriber will be notified, .then or .catch method से, हम notify कर सकते हैं subscriber को
9:25
कि आपकी value मिल गई, या फिर आपका यह error है, जो कि throw कर दिया गया है
9:29
the syntax of promise looks like this, आपको promise is equal to new promise, function resolve reject
9:33
ये built in callbacks है, javascript engine देता है हमको, हमने नहीं बनाई
9:38
आपके पड़ोचे नहीं बनाई, मेरे ताउजी नहीं बनाई, ठीक है, resolve reject आप call कर सकते हो
9:43
इसके अंदर resolve call करोगे, तो एक value के साथ आपकी promise resolve हो जाएग�
9:46
यानि की fulfillment as resolved हो जाएगा fulfillment दो तरीके से हो सकता है promise क�
9:51
या तो resolve होगा या reject होगा अगर आप चाहते हो कि resolve हो जाए एक value मे�
9:56
तो वो fulfillment as a resolved value होगा और वो fulfillment मैं खुद से बोल रहा हूँ य�
10:03
मेरा opinion है happy resolution होता है कि भाई एक value मिल गई आपको अब value चाहे थ�
10:07
reject मतलब unexpected resolution sorry unexpected fulfillment जो की एक error मे�
10:13
आप लोगों को दिया जाता है तो वो एक happy fulfillment नहीं है resolve and reject are two callbacks provided by the
10:19
javascript itself they are called like this आप resolve के अंदर value डाल क�
10:23
ये indicate कर सकते हो कि job finish हो गई है successfully reject के बाद error डाल क�
10:27
आप ये indicate कर सकते हो कि job होती है, एक result होता है, initially pending होती है state
10:38
और उसके बाद fulfilled या rejected, जैसे कि यहाँ पर अगर मैं आपको P1 दिखा दूँ भी, ठीक है, तो यह देखो यहाँ पर fulfilled true आ गया
10:45
यह fulfilled हो चुकी है, fulfilled आ गया, ठीक है, और P2 अगर मैं आपक�
10:50
दिखाऊं तो यह रिजक्टेड आ गया ठीक है कि बाइस वेरर से रिजक्ट हो चुके तो फुल्फिल्ड और रिजक्टेड यह दो स्टेट्स होती है ठीक है इनीचियली अन्डिफाइन थेन चेंजेस टो वैल्यू एवर रिजॉर्ड और एरर वेन रिजेक्टेड ठीक है अ�
11:20
ठीक है, मैंने सर्फ एक किया, क्योंकि मैं सर्फ result में interested था, तो मैंने ये वाला function pass किया, जो मैंने अभी highlight कर रखा है, अपनी computer screen पर देखो, जो मैंने highlight कर रखा है, वो pass किया, लेकिन मैं यहीं के यहीं error भी catch कर सकता हूँ, जिसे कि मैं अगर p2.then करूँ, p2.catch use ना करना चाह�
11:50
को and finally console.log value कर देते हो ठीक है तो यहाँ पर आप देख सकते हो कि most fundamental one is then promise.then आपने function लेका result इसके बाद आपने उसको handle कर लेंगा result को function error और आपने error handle कर लेंगा आप किसी भी एक promise को ऐसे देखो कि ये network से data fetch कर रही है ठीक है network से data fetch कर रही है और data आ भी सकता है दोस्तों सकता है data �
12:20
कर लो आप तो वह को हैंडल करना पड़ेगा तो वह कैसे करोगे आप आप डॉट कैच का यूज करके करोगे अंदर अब यहा�
12:27
argument to dot then promise dot then alert
12:42
दे दिया, यानि कि alert मैं इसको दूँगा, तो जो भी value होगी वो मुझे alert होगी मिल जाएगी इस syntax
12:46
से confused मत होना मैं dot then को क्या देता हूँ एक function देता हूँ न�
12:50
खुद बनाता हूँ मैं function मैंने alert दे दिया ठीक है वही बात है जो भी value होगी promise की जिस भी value मे�
12:56
resolve होगा वो alert हो जाएगी ये syntax अगर आप लिखोगे तो और मैं चाहता हूँ आप लोग लिखना लिखना इसको ब्राउजर में ठीक है यह दूर एपल पर कहीं पर भी लिखन�
13:03
इफ वी अंट्रेस्ट ऑल इन एररर्स वी के नॉट एस फर्स्ट आर्ग्यूमेंट्स एंड उसके बाद दूसरे विमेज�
13:10
हम error handle करने वाला function दे सकते हैं, या फिर हम dot catch को use कर सकते हैं
13:15
or we can use dot catch, आपके पास दोनों ही यहाँ पर
13:19
जो है, options है, अब देखो, मैंने आपको बताया, to get the value
13:27
और यहाँ पर to get the error, to catch the errors कहूँगा इसको मैं
13:33
ठीक है, और t को capital कर देते हैं यार, सुन्दे लगेगा code हमार�
13:37
तो dot catch करके हम लोग यहाँ पर कुछ ऐसे कर सकते है�
13:42
अगर मैं मार लो यह ना use करना चाहूँ p2.catch ना use करना चाहू�
13:45
तो मैं कुछ ऐसा कर सकता हूँ मैं कहते हूँ p2.then और उसके बाद मै�
13:51
एक तो value अगर मिल गई मुझे तब मैं क्या करूँगा और वैल्यू मुझे नहीं मिली तब मैं क्या करूँगा तो मैं एक function ऐसे दे दूँगा error करके format करता हूँ code को और एक code formater कहाँ गए त�
14:03
चलो कोई बात नहीं अब हम क्या करेंगे मैंने यहां पर एरर दे दिया मैंने यहां पर और यह कॉमा टाउंगा मै�
14:11
यहां से डॉट देन वैल्यू और यहां पर एरर और कंसोल डॉट लॉग मैं यहां पर एरर कर दूंगा ठीक है तो अगर मैं इसक�
14:22
करूं तो दोनों प्रॉमिसेस प्रेंडिंग है पहली प्रॉमिस सबसे पहले सबसे पहले क्या दोनों ही पास पास सेकंड मे�
14:27
होंगी पैरलली रिजॉल्ट तो देखो यह वाली रिजॉल्ट हुई और यह वाली यहाँ पर देखो एरर प्रेंट हो गया कंसोल में ठीक है औ�
14:33
अगर ये p2.catch भी हटा दू ना, मुझे actually p2.catch हटा देना चाहिए था
14:37
ताकि हम लोग ये verify कर सकें, कि error अभी भी हमारे catch किये जा रहे हैं
14:43
अब देखो 5 second के बाद आपको error throw होकर नहीं मिलेगा, अगर मैं ये वाली call हटा दू इसकी, जो second argument है वो हटा दू अगर
14:49
तब मुझे error देखने को मिलेगा ठीक है ये बात बिल्कुल आप लो�
14:54
समझ लो ठीक है आपको error देखने को मिलेगा अगर मैंने इसको ऐसे कर दिय�
14:59
और मैंने reload किया तो मुझे अब error देखने को मिलेगा 5 second के बा�
15:03
मुझे 5 second के बाद error क्यों देखने को मिलेगा calls, network calls क�
15:21
कि अगर आप लोग network से call करना चाहते हो और कुछ data receive करना चाहते हो त�
15:27
दो बाते होंगी, या तो आपको data मिलेगा या आपको data नहीं मिलेगा, अगर आपको data नहीं मिलेग�
15:31
तो आप reject कर दोगे promise और ना resolve कर दोगे, अगले video
15:35
में हमें एक बड़ा साइ काम करने वाले है, बड़ा मज़ेदार काम करने वाले है
15:39
और वो है हमारी quiz, जिसमें कि हम लोग load script function को लिखेंगे
15:44
promises का इस्तमाल करके, बड़ा मज़ा आने वाला है, और बड़ा समझ में आएगा, आप लोगों कोई चीजे क्यों कर रहे है�
15:50
जैसे कि हम कर रहे हैं ठीक है why things are done the way that they are
15:54
ठीक है फिर उसके बाद promise chaining को देखेंगे और काफी मज़ा आने वाला ह�
15:58
इस chapter में और finally जब हम projects वगेरा बनाएंगे ना तो promise तो clear होई जाना है आपक�
16:02
तो इस बात की तो tension मत लेना कि मुझे clear नहीं होगा मैं बस यहाँ पर notes लेके बैठा हू�
16:06
या बैठी हुई हूँ और मुझे कुछ समझ में ही नहीं आ रहा है और मैं बस करesti रही हूँ अभी थोड़ा सा time दो time लगता है इन सब चीज़ों को समझने मे�
16:13
लेकिन ये चीज वो है जो कि अगर आपको समझ में आ गई जिन्दगी बदल जाएगी आपक�
16:17
सच में बदल जाएगी जिन्दगी क्योंकि the way you will code after understanding this
16:21
will be phenomenal with that said आप लोग javascript ये playlist को access कर लेन�
16:25
अभी के लिए इस वीडियो में इतना है guys thank you so much guys for watching this video
16:29
and I will see you next time करते है�