Fetch API _ JavaScript Tutorial in Hindi #66
3K views
Feb 10, 2024
In the 66th tutorial of our JavaScript series, presented in Hindi, embark on a journey to master the Fetch API – a powerful tool for making HTTP requests in web development. This session unravels the capabilities of the Fetch API, providing a comprehensive guide on how to send requests, handle responses, and seamlessly integrate data into your JavaScript applications. Whether you're a web developer looking to enhance your skill set or a JavaScript enthusiast eager to learn about modern web technologies, this tutorial offers practical examples and step-by-step guidance in Hindi. Join in, empower your web development projects, and elevate your understanding of the Fetch API in JavaScript!
View Video Transcript
0:00
गर्स आज का यह वीडियो मैं डेडिकेट करना चाहूँग��
0:02
फैच एपिआई को, हम लोग फैच एपिाई के बारे में पढ़ेंगे कभी भी नेटवर्क से हमें डेटा मंगाना होता है यहां फिर नेटवर्��
0:08
पर या नहीं कि सरवर पर अपलोड करना होता है डेटा तब हम फैच एपिआई का इस्तिमाल करते हैं क्या इस पसिफिक्स हैं इसक��
0:13
कितना कनविनियन्यंट है यह प्रामिसिस के साथ किस तरह से काम करता ह��
0:17
फैच चलते हैं कम्प्यूर्टर स्क्रीन में और देखते हैं इन सब चीज़ों को आज फैच एपिआई की आप लोगों से बात करना चाहूँगा और आप लोगों को बताऊँगा किस तरह स��
0:30
नेटवर्क रिकेस्ट भीज़िया सकती है जावस्क्रिप्ट के माध्यम से मैंने यहाँ पर अभी आ��
0:34
लोगों को एकस्ट्रेइन करने के लिए रैपल बना रखिए जिसमें मैं काम करूँगा इसको एक नई टैप में खोलूँगा और इसको यहाँ से क्लोज करदूंगा तो जो भी कोडिंग मै��
0:41
पर यहाँ पर करने वाला हो मुझे इस रैपल में मिलेगी जैसे कि मैं अगर इस पेज़ का टाइटल फेच एपिआई करके सेव करूँगा और रीलोड करूँगा इस पेज़ को तो देखो यहाँ पर भी टाइटल फेच एपिआई हो गया है तो यह कोडिंग वाला ��
1:11
प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्च��
1:41
प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्च��
2:11
प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्च��
2:41
प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्च��
3:11
प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्च��
3:41
प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्च��
4:11
तो इसलिए जब आप प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची ��
4:41
प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्ची प्रश्च��
5:11
तो मैं आपर लिखोंगा console.log value2 और मैं value भी लिख सकता हूँ क्योंकि ये अपने आप में एलाग एलाग functions ह��
5:17
अब ये syntax इतना confusing क्यों है और आप लोगों कैसे ये easy आप लोग बनाओगे अपने लिए syntax को ये मैं आप लोगों को बताता हू��
5:25
अब देखो मैं इसको जैसे ही refresh करूँगा तो देखो मेरे पास ही data यहां पर आ गया ठीक ह��
5:29
यहां पर मुझे wind speed मिल गई है मुझे यहां पर temperature मिल गया है मुझे description मिल गया ह��
5:35
सब कुछ मुझे मिल गया है forecast का एक array मिल गया है जिसमें कि शायद forecast के बारे में बताये जाएगा कि बाही पहले दिन में यह होगा दूसरे दिन में यह होगा तीसरे दिन में यह होगा which is great या which is awesome ठीक है एक weather app बनाई जा सकती है से API की सायच अस��
5:47
पर मैं यह syntax आपलोग को सबसे पहले समझाता हूँ जब भी आप किसी चीज़ को fetch करते हो तो होता है यह है कि आप लोग एक promise जो है वो आपको मिल जाती है और वो promise resolve होती है एक और promise में जिसकी value जो होती है वो final result होता है तो दो बार आपको .dell लगाना पड़ता है अब आ��
6:17
यह बताया जाता है कि आप लोग के syntax को रट लो यह बताया जाता है seriously बताया जाता है क्यों बताया जाता है क्योंकि यह उनके लिए सबसे आसान होता है उनको बोला जाता है कि भाई fetch API में दो .dell लगते हैं दो .dell लगाके यहाँ पर आपको value मिल जाती है और इसके साथ क��
6:47
प्रपर्टीज नहीं पर प्रपर्टीज नहीं पर प्रपर्टीज नहीं पर प्रपर्टीज नहीं पर प्रपर्टीज नहीं पर प्रपर्टीज नहीं पर प्रपर्टीज नहीं पर प्रपर्टीज नहीं पर प्रपर्टीज नहीं पर प्रपर्टीज नहीं पर प्रपर्��
7:17
तो यहाँ मिलेगा value1.status और value1.ok अब मैं इसको गई सेव करूँँ तो आप लोग देख��
7:23
मैं जएसे ही रिलोड करूँँगा तो देखो 200 और True मेरे पास यहाँ पर पहले आया फिर इसके बार डेटा रेटर्न हु��
7:30
यानि कि मुझे यह पता चल जाएगा कि स्टाटस कोड क्या है और मुझे यह भी पता चल जाएगा कि सब कुछ ठीक ठाक है की नहीं ह��
7:36
यानि कि 200 से 299 का स्टाटस कोड मुझे मिला है की नहीं मिला ह��
7:40
क्योंकि इसके अलावा कुछ भी मुझे स्टाटस कोड मिला है यानि कि यहाँ पर आपको कुछ और करना है तो आप कर ल��
8:06
क्योंकि response बड़ा हो सकता है और इसको निकालने में time लग सकता है इसको दो stage process बनाये गया है कि आगर आपको यहीं पर पता चल जाएँ कि आपका response नहीं आया है ठीक स��
8:14
तो आप कोई action ले पाओ सिंबल सी बात है ठीक है तो यहाँ पर आप यह काम कर सकते हू��
8:19
यहाँ पर आपको यहीं पर पता चल जाएँ कि आगर आपको यहीं पता चल जाएँ कि आगर आपको यहीं पता चल जाएँ कि आगर आपको यहीं पता चल जाएँ कि आगर आपको यहीं पता चल जाएँ कि आगर आपको यहीं पता चल जाएँ कि आगर आपको यहीं पता ��
8:49
जाएँ कि आगर आपको यहीं पता चल जाएँ कि आगर आपको यहीं पता चल जाएँ कि आगर आपको यहीं पता चल जाएँ कि आगर आपको यहीं पता चल जाएँ कि आगर आपको यहीं पता चल जाएँ कि आगर आपको यहीं पता चल जाएँ कि आगर आपको यहीं प��
9:19
जाएँ कि आगर आपको यहीं पता चल जाएँ कि आगर आगर आपको यहीं पता चल जाएँ कि आगर आगर आपको यहीं पता चल जाएँ कि आगर आगर आपको यहीं पता चल जाएँ कि आगर आगर आपको यहीं पता चल जाएँ कि आगर आगर आपको यहीं पता चल ज��
9:49
और वो दिक्कत क्यों आएंगी ये भी आपलों को बताता हूँ देखो यहांपर एक दिक्कत आग��
9:53
कि fail to execute JSON response body stream already read कह रहा है भाईय��
9:57
आपने read कर लिए dot text आपने run कर लिए अब आप क्या चाहते हैं दुबारे क्यों run कर रहे हैं उसक��
10:01
तो यह आप नहीं कर सकते हैं सिर्फ एक बार कर सकते हैं यह तो response.json कर ल��
10:05
यह response.txt कर लो फिर इसके बाद यह वाली promise जब resolve होगी तब आपक��
10:09
यहाँपर कुछ इस तरह से आपकी value मिल जाएगी ठीक है अग��
10:13
आपने JSON run किया है तो आपको एक JavaScript object मिलेगा अगर आपने text run किया है तो आपको एक string मिल जाएगी ठीक है बढ़िय��
10:19
अब response headers के बारे में बात करते हैं ठीक है response headers
10:23
के बारे में बात करते है response headers are available in response.headers ठीक है अग��
10:27
आपको headers चाहिए response headers चाहिए तो आपको यहाँपर एक चीज और कर सकते ह��
10:31
आप response.headers कर सकते हो और आप इसको जब से reload करोगे अभ��
10:37
तो आपको यहाँपर headers मिल गए देखो जो के भी खाली है response headers कु��
10:41
नहीं मिले मुझे ठीक है तो अगर आप response headers जो है print करना चाहते ह��
10:45
तो कर सकते हो request headers कैसे print करोगे आप लोग request headers
10:49
को print नहीं करना चाहोगे राधर आप लोग request headers को पास करना चाहोगे अपने request के सा��
10:53
अब देखो request headers और response headers में क्या difference है request headers
10:57
हैं जो कि हम देते हैं हम कहते हैं वह यह header ले ल��
11:01
authentication हमारा token ले लो हम से कुछ information ले लो additional request के बारे मे��
11:07
वह हमारे headers हैं और आप लोग को जो response मिलता ह��
11:11
कुछ headers आपको मिलते हैं वह response होता है तो दोनों ही important ह��
11:15
to set a request header in fetch आप लोग request headers को set करते ह��
11:19
response headers को आप print करोगे request headers आप लोग set करने के लि��
11:25
fetch में यह वाला syntax यूज़ कर सकते हैं आप लोग जो यह वाला दाल सकते है��
11:29
एक object बनाओ उस object की key दो header और एक object बनाओ authentication secret ऐस तरह स��
11:33
एक object और पास कर दो हेटर्स नाम का एक object दे दो options मे��
11:37
यह options का object है यह नहीं कि options अपने आप में एक object है जिसकी key हेटर्स ह��
11:41
और value एक object है आप लोग जो यह पहले आपको पहले पहले आपको पहले आपको पहले आपको पहले आपको पहले आपको पहले आपको पहले आपको पहले आपको पहले आपको पहले आपको पहले आपको पहले आपको पहले आपको पहले आपको पहले आपको पहले आपको पहले आपको ��
12:13
पहले आपको पहले आपको पहले आपको पहले आपको पहले आपको पहले आपको पहले आपको पहले आपको पहले आपको पहले आपको पहले आपको पहले आपको पहले आपको पहले आपको पहले आपको पहले आपको पहले आपको पहले आपको पहले आपको पहले आपक��
#Computer Education
#Programming
#Web Design & Development