Up next in 10
Sending POST request with Fetch API _ JavaScript Tutorial in Hindi #67
10 views
Feb 10, 2024
Dive into the intricacies of data exchange in web development with the 67th tutorial of our JavaScript series, presented in Hindi. Explore the art of sending POST requests using the Fetch API, a crucial skill for interacting with servers and databases. This tutorial provides practical examples and step-by-step guidance in Hindi, ensuring you grasp the nuances of constructing and sending POST requests effortlessly. Whether you're a web developer aiming to enhance your data-handling capabilities or a JavaScript enthusiast eager to expand your knowledge, this session is your gateway to mastering the intricacies of the Fetch API in the context of POST requests. Join in, amplify your web development skills, and empower your JavaScript projects with advanced data exchange techniques!
View Video Transcript
0:00
आज के इस वीडियो में मैं आप लोगों को बताऊंगा कि किस तरह से आप लोग Fetch API की सायथा से Post Request मार सकते ह��
0:05
Post Request हम बारते हैं जब भी हमें कोई Data Send करना होता है बड़ा सर्वर प��
0:09
क्योंकि Get Request की Limit होती है URL में आप कितना Data भेज सकते हैं इस चीज़ क��
0:13
हम लोग फेच से देखेंगे किस तरह से एक object को server पर बेश सकते है��
0:18
चलता है computer screen में और देखते हैं ये सब चीज़े किस तरह से काम करती ह��
0:22
गैस आज हम लोग post request के बारे में देखेंगे कि किस तरह से post request भेजी जा सकती ह��
0:32
तो मैं आप लोगों मिलवाना चाहूँगा JSON placeholder से जो की free fake rest API ह��
0:37
और हम लोग notes में भी देखेंगे की post request कैसे बनाई जाती ह��
0:40
सबसे पहले notes में जो मैंने लिखा है वो बहुत ही crisp point है तो उसको देख लेते ह��
0:44
to make a post request we need to use fetch options यानि कि fetch API के साथ जो दूसरा argument होता है जैसे कि मैंने आप लोग को बताया थ��
0:51
वो options का होता है तो अगर हम वो options को supply करते है��
0:56
तब हम post request भेज सकते हैं अब यह options हमें कहाँ पर देना ह��
1:00
यह मैंने लिखा हुआ syntax यहाँ पर post request जब हम मारना चाहेंग��
1:04
तब हम यहाँ options object में method को post कर देंगे और हमारा काम हो जाएगा ठीक है तो यहाँ पर हम fetch API को ऐसे इस्तेमाल कर सकते हैं तो बहुती simple से example आपको दिखाता हूँ सबसे पहले मैं यहाँ पर let options is equal to लिखूँगा और options एक object है जिसे कि मैंने आप लोग को अलड़ी बताया था यहा��
1:34
कर देंगे कॉन्टेंट टाइप को एप्लीकेशन जैसे ठीक है एडर से ऑब्जेक्ट है तो यहां पर जो कॉन्टेंट टाइप ह��
1:40
उसको हम करेंगे एप्लीकेशन जैसे ठीक है और यहां पर इसको मैनूअली टाइप कर देता हूं और हमारा जो कॉन्टें��
1:51
पर वह हो गया एप्लीकेशन जैसे इसको मैं इस तरह से रखूंगा नीचे को एंटर मार्क क्योंकि शायद मैं औ��
1:55
एडर्स पीस मैं आईड करना चाहूं फ्यूचर में तो कॉंटेंट टाइप एप्लीकेशन जैसे होता है अगर आप लोग यहा��
2:01
जेसन प्लेस होल्डर की वेबसाइट पर जाते हो तो यहां पर आप लोग को एक कोड मिलता अब यह कहां पर मिलत��
2:05
मैं आप लोग को बताता हूं आप जैसे खोलों के जेसन सबसे वेली क्या है यह कोई ऐसा कोई इतना लंबा चौड़��
2:10
प्रदक्ट नहीं है वह दिवलपर्स की मदद करने के लिए वेबसाइट बस ठीक है आपको एक जैसेन प्लेस होल्ड��
2:17
मिल जाता है यानि कि आप यहां पर एक मॉकफेच एपीआई मार सकते हो आप यहां पर यह वाला कोड़ अगर रन करोग��
2:23
यह गैट टूड्यूज का कोड है जो कि आपको टूड्यूज प्राप्त करके देगा ठीक है मैं जरस्ट को रन करता हूं इ��
2:30
रैपल को और नहीं टाप में खोलता हूं यार ताकि मुझे इसका कंसोल देखने को मिल जाए ठीक है तो मैं यहां प��
2:37
इसको close करूंगा और यहाँ पर मैं क्या करूंगा कि enter मारूंगा तो यहाँ पर मुझे यह मिल गया ठीक ह��
2:46
data मिल गया कुछ server से simple सी बात यह रोगेट रिक्वेस्ट थी हम पोस्ट रिक्वेस्ट की तरफ देख रहे हैं औ��
2:52
post request code copy paste copy paste option object replace
3:10
वो मैंने अपना manually बनाया हुआ है उपर option object ठीक है options औ��
3:16
जो इन्होंने लिखा हुआ था exactly कुछ इसी तरह का मैं डालूँगा बट मैं एक एक करके आपको समझा रहा हू��
3:20
तो body में मैं क्या करूँगा एक object दूँगा जो कि इन्होंने दिया हुआ है अलग-अलग एपिएई अलग-अलग बॉडी एक्सपेक्ट करेंगे आप लोगों से ठीक है तो यहा��
3:29
पर देखो मैंने जेसन डॉट स्ट्रिंगी फाइल करके एक इस तरह से जो है मैं दे दूंगा मैं कहूंगा कि बॉडी ए��
3:35
string होगी तो जेसन और स्ट्रिंगी फाइ क्या करता है एक जावास्क्रिप्ट ऑब्जेक्ट को स्ट्रिंग में कन्वर्ट क��
3:39
देता है ठीक है और जेसन और पार्ट्स क्या करता है एक वैलेट जेसन स्ट्रिंग को जावास्क्रिप्ट ऑब्जेक्ट मे��
3:45
रिलोड कर देता है तो यहां पर हम फू बार और यूजर आईडी वन इसको पोस्ट करेंगे इस यूअरल पर ठीक ह��
3:51
है सिंपल सी बात है तो यह जैसे मैं करूंगा मैं आप लोगों को दिखाता हूं रिलोड करके पेज को जैसे मै��
3:56
लोगों को अब देखो यहां पर फू बार और यह हमारा जो रिसोर्स है वह क्रिएट हो चुकी है ठीक है तो अपने पोस्��
4:02
क्वेश्चन क्रिएट कर लिया अच्छा लिए अपनी जो हमारी रिसोर्स है उसको जो कि हमारा यह टू था मैं चाहता त��
4:09
यहाँ पर टाइटल में है लिख सकता था और यहाँ पर बॉडी में भाई लिख सकता था और यहाँ पर 1100 लिख सकता था और इस��
4:19
चीज को मैं अगर रिलोड करूंगा तो यहाँ पर है डिवायर 1100 आएगा देख रहा है वह भी भाई 1100 और आईडी 101 ठीक ह��
4:25
तो यह भी किया जा सकता है अब यह तो हमने जो नॉर्मल सेंटेक्स है वह यूज किया हमने पैच एपीआई का सेंटेक्��
4:31
यूज किया है ठीक है अब हम लोग क्या करेंगे कि यहां पर आप लोग को मैं दिखाता हूं किस तरह से इसी चीज क��
4:37
एक एसिंग फंक्शन में हम राप करेंगे ठीक है मैं इसको एक एसिंग फंक्शन में राप करूंगा आपको यार यह क्य��
4:44
कर रहे हो ऐसा क्यों कर रहे हो यार ऐसा इसलिए कर रहा हूं कि हमने इस इंग्रेट बहुत अच्छी तरह से चीज का थ��
4:48
और मैं यहाँ पर लिखूंगा create to do is equal to a casing function ठीक है यह casing function है और यहाँ पर मैं लिखूंगा let p is equal to fetch य��
5:00
और यहाँ पर यह करने के बाद और इसको भी मैं अंदर ही डालूँगा इसके इस function के अंदर डालूँगा और आप आपको बताऊंगा मैं क्या कर रहा हू��
5:08
मैं यहाँ पर लिखूंगा let response is equal to await क्या करूँगा p.json
5:15
ठीक है और यहाँ पर मैं कर दूँगा return response यहाँ पर मैं एक main func नाम से function मनाऊँग��
5:25
जो कि क्या होगा मैं इसको ज़रा कुछ इस तरह से करूँग��
5:28
कि const main func const main func is equal to एक function
5:34
और यह क्या करेगा create to do करेगा और यहाँ पर मैं लिखूँग��
5:39
let to do is equal to create to do और इसको मैं close करूँग��
5:46
और मैं यहाँ पर लिखूँगा console.log to do console.log to do मैं यहाँ पर use कर रहा हू��
5:54
और मैं जैसे ही reload करूँगा आप यहाँ पर देखना कि यह enf2
6:01
create to do async function await
6:13
क्योंकि जो हमारा यह async function है वो हमेशा promise return करता ह��
6:18
तो यहाँ पर मैं let to do is equal to await create to do ऐसे कर दूँगा ठीक ह��
6:22
तो मैं यह काम जैसे ही करूँगा reload करूँगा यह कह रहा है p.json is not a function
6:26
यह कैसा मज़ाक है भाई मैंने यहाँ पर fetch is equal to
6:31
यह is equal to fetch किया p is equal to यह किय��
6:34
मैंने यहाँ पर p.response is equal to p.json किया ऐसा क्यों हो रहा ह��
6:40
p.json is not a function ऐसा क्यों देखते हैं यार क्या नाटक हो रहा ह��
6:46
line number 14 में await किया मैंने p.json सबसे पहले मैंने ये एक promise ल��
6:53
ओ मैंने इसको await नहीं किया यार ओ मैं गॉड इसको await तो करना बनता ह��
6:57
इसको await करूँगा फिर await करूँगा इसको तो यहाँ पर देखो आप लोग यह मेरे पास इस तरह से आ गया ठीक है जो क्रिएट किया था वह आ गया तो एसिंग अवे��
7:08
फंक्शन का मैंने यहाँ पर इस्तेमाल किया है एसिंग अवेट फंक्शन हमेशा प्रॉमिस रिटर्न करता है मैंने आ��
7:13
बताया था इसलिए मैंने मीन फॉर्म बनाया उस प्रोविस को विट किया और यहां पर आगे तो एसी का विट के सा��
7:17
थोड़ा इजी हो जाता है कि करके रुकते रुकते रुकते रुकते आपका काम होता जाता है ठीक है अब इसी में अगर मै��
7:23
ऐसा करना चाहूँ कि जो मेरा to do object है वो मैं pass करूँगा तो मैं इसको Ctrl X करके यहाँ पर to do कर दूँग��
7:28
और to do को pass कर दूँगा कुछ इस तरह से और यहाँ पर मैं कहूँगा कि create to do to do
7:34
और यहाँ पर मैं लेकुँगा let to do is equal to क्य��
7:42
यह और यहां पर मैं काम करता हूं टू डू आर कर vezko जो कि टू डू रिस्पोंस है ठीक है और मैं इसको रिलोड करूंग��
7:52
यहां पर तो आप लोग देखना यह यहां पर कुछ इस तरह से आ गया दुबारा से ठीक है तो मैं अगर यहां पर अब हैर��
7:59
बाई टू कर दूं तो मुझे है रिटू बाई टू देखने को मिलेगा हमने है रिटू और भाई टू किया है और इसको रिलो��
8:04
करूंगा तो हैरी बाई की जगह है रिटू भाई टू आ जाएगा तो मैं अपना टूडो सप्लाइक करके क्रेट कर सकता हूं इसलि��
8:10
यह सिंह फंक्शन मनाया ठीक है आयोब कि आप लोग को यहां पर अच्छे से बता चल गया कैसे चीजें काम कर रही है��
8:17
ठीक है और अगर मैं चाहूं तो मैं यहां पर कॉल्स्ट क्रिएट टू डू सॉरी गेट टू भी बना सकता हूं गेट टू डू औ��
8:27
यहां पर मैं आईडी डाल दूंगा ठीक है और मैं लिख�ுंगा गैट टो डू इस एक्वल टो एक फंक्शन होगा जो कि क्य��
8:35
करेगा जो कि आईडी लेगा और यह भी एक इस इन बनाना पड़ेगा फंक्शन और मीन फंक्वेंट उपर बनाता है इसक��
8:43
तो क्रिएट टू नीचे बनाता हूं ठीक है यहां पर मैंने बनाया देखो क्रिएट इसके नीचे बना रहा हूं टू टू को ठीक ह��
8:47
और यहां पर गेट टू इस इकॉल टू एसिंग आईडी यहां पर लिखूंगा और सिंपल सा काम करूंगा यार यहां से कॉपी पेस्��
9:18
कुछ ऐसा करता हूं और लिखता हूं लेट आज इग्ल टो विट रिस्पॉंस टॉट जीजन और यह क्या करेगा फिर रिटर्��
9:27
राज रेटर्न और रेटर्न और जाएगा और इसको सेव किया तो यहां पर अच्छे से हो गया काम मेरा अब मैं यहां प��
9:34
कर सकता हूं कंसोल डॉट लॉब कैट टूडो कर सकता हूं विद आईडी 567 देखता हूं एक्��
9:50
हुआ था एक प्रोमिस है तो मुझे इसको वेट करना पड़ेगा तो मुझे कुछ ऐसा करना पड़ेगा कंसोल डॉट लॉग मैंने यहां पर कह��
10:01
कि भाई अवेट करो फिर दिखाओ इसको और देखो यहां पर इसने मुझे विद आईडी 567 यह वाला टूटो रेटर्न करके दिय��
10:10
है अब इन नोट वाइस तुम जी कुछ रेटर्न करके दिया बट मेरी जो रिक्वेस्ट थी उपस मैंने यहां पर यार यह भ��
10:16
नहीं आए डिप्लेट देखो देख रहे हो आप लोग दोस्तों गलती मैंने करिए मैं इनको ब्लेम कर रहा हूं इन्होंन��
10:24
आईडी वन से दिया लेकिन मैंने इसको आईडी पाइट पास की थी कि मैंने अपनी फंक्शन में हट कोड कर रहा था त��
10:30
यह मेरी गलती है मैं इसको ठीक करूंगा अपनी गलती को और यह रहा � Hari 5-7 वाला नहीं है सॉरी चलो फाइ��
10:36
वाला ढूंढते हैं अब वाला है क्या नहीं होगा तो अब मैं बनाऊंगा वाला और देखो 5-7 वाला यह नहीं ह��
10:44
एक्शनी से वह में टाइम लगता है थोड़ा तो यह सेव होगा फाइब्स वाला है देखो इस नाइड फाइब्स वाला दे दिय��
10:50
अच्छा आईडी 101 वाला देखता हूं मेरा आ रहा है कि नहीं आ रहा है अच्छा ठीक है देखता हूं आ रहा है कि नहीं आ रह��
10:57
उप्स मुझे यहाँ पर reload करना है और 101 वाला भी इसके पास नहीं है अब मुझे नहीं बता यह किस हिसाब से pull कर रहा है 101 देखो यहाँ पर आया मेरा URL लेकिन 404 आया but this is how await async works with patch ठीक है I hope कि आपको समझ में आ गया और मैंने async await वाला syntax इसलिए यूज़ किया था कि आप लो��
11:27
जाते हैं अलग अलग प्रॉमिस इसको मुझे डॉट देन सिंटेक्स यूज नहीं करना था इसलिए मैंने किसी फंक्श��
11:31
मना लिया कि मुझे ज्यादा लगता है कि पीजी गॉल्ड अवेट कर लो इस प्रॉमिस के जो रिजल्ट आएगा फिर इसक��
11:36
आवेट कर लो और उसके बाद रिटर्न कर दो रिस्पॉंस जो कि एक प्रॉमिस होगी उसको भी आवेट कर लो फिर इसके ज��
11:41
इसका जो रिटर्न वैल्यू एस कि उसको भी आवेट कर लो ठीक है मैं ओप कि आप लोग समझ में आ गई यह चीज कि��
11:47
से की जाती है अभी के लिए इस वीडियो में इतना ही guys thank you so much guys for watching this video
11:53
and I will see you next time