अंग्रेजी संस्करण: https://www.javascripttutorial.net/javascript-fetch-api/

लायें एपीआई एक आधुनिक इंटरफ़ेस आप बनाने के लिए अनुमति देता है HTTP अनुरोध करता है वेब ब्राउज़र से सर्वर के लिए।

यदि आपने पहले ही ऑब्जेक्ट XMLHttpRequest( XHR) के साथ काम किया है , तो Fetch API ऑब्जेक्ट के रूप में सभी कार्य कर सकता है XHR।

इसके अलावा, Fetch API बहुत सरल और साफ है। यह Promiseवेब ब्राउज़र के सर्वरों के लिए अनुरोध करने के लिए अधिक लचीली सुविधाएँ प्रदान करने के लिए उपयोग करता है।

यह विधि fetch()वैश्विक स्कोप में उपलब्ध है जो वेब ब्राउजर्स को URL के लिए अनुरोध भेजने का निर्देश देती है।

निवेदन: निवेदन भेजना

fetch()केवल एक पैरामीटर है कि संसाधन आप खोज करना चाहते का URL है की आवश्यकता है:

विधि fetch()एक Promise(एक वादा) लौटाती है ताकि आप विधियों का उपयोग कर सकें then()और catch():

जब अनुरोध पूरा हो जाता है, तो संसाधन उपलब्ध होगा। उस बिंदु पर, Promiseएक वस्तु को हल किया जाएगा Response।

वस्तु Responseहै एपीआई आवरण खोजा गया संसाधन के लिए। ऑब्जेक्ट Responseमें प्रतिक्रिया के निरीक्षण के लिए उपयोगी कई गुण और तरीके हैं।

जवाब: जवाब पढ़ना

यदि प्रतिक्रिया सामग्री कच्चे पाठ प्रारूप में है, तो आप विधि का उपयोग कर सकते हैं text()। यह विधि खोजे गए संसाधन की पूरी सामग्री के साथ हल करने वाली विधि text()लौटाती है Promise:

व्यवहार में, आप आमतौर पर async/awaitविधि के साथ उपयोग करते हैं fetch(), जैसे:

इसके अलावा करने के लिए विधि text(), वस्तु Responseजैसे अन्य तरीकों है json(), blob(), formData()और arrayBuffer()अपने डेटा प्रकार के साथ सौदा करने के लिए।

प्रतिक्रिया स्थिति कोड से निपटना

ऑब्जेक्ट Responseगुण के माध्यम से स्थिति कोड और स्थिति पाठ प्रदान करता है statusऔर statusText। जब कोई अनुरोध सफल होता है, तो कोड statusहै 200और statusTextहै OK:

परिणाम:

यदि अनुरोधित संसाधन मौजूद नहीं है, तो प्रतिक्रिया कोड 404 होगा:

परिणाम:

यदि अनुरोधित URL सर्वर त्रुटि उत्पन्न करता है, तो प्रतिक्रिया कोड होगा 500।

यदि अनुरोधित URL को एक प्रतिक्रिया के साथ एक नए पर पुनर्निर्देशित किया जाता है 300-309, तो वस्तु की स्थिति Responseनिर्धारित की जाएगी 200। इसके अलावा, पुनर्निर्देशित संपत्ति पर सेट किया जाएगा true।

fetch()रिटर्न एक Promiseजो जब इस तरह के एक ब्राउज़र टाइमआउट के रूप में एक असली विफलता, किसी नेटवर्क कनेक्शन खो दिया है या CORS का उल्लंघन को खारिज कर दिया।

जावास्क्रिप्ट लायें एपीआई उदाहरण

मान लें कि आपके पास jsonनिम्न सामग्री के साथ वेब सर्वर पर स्थित एक फ़ाइल है:

और इस तरह एक HTML पेज:

में app.js, हम fetch()उपयोगकर्ता के डेटा को प्राप्त करने और <div>कक्षा के साथ तत्व के अंदर डेटा को प्रस्तुत करने के लिए विधि का उपयोग करेंगे container।

सबसे पहले, उस फ़ंक्शन को घोषित करें जिसे getUsers()आप users.jsonसर्वर से देख रहे हैं ।

फिर, उस फ़ंक्शन को विकसित करें renderUsers()जो उपयोगकर्ता डेटा प्रदान करता है:

परिणाम:

सारांश

• लायें एपीआई आप एसिंक्रोनस रूप से एक संसाधन अनुरोध करने के लिए अनुमति देता है।
• fetch()किसी वस्तु को हल करने वाला वादा वापस करने के लिए विधि का उपयोग करें Response। वास्तविक डेटा प्राप्त करने के लिए, आप ऑब्जेक्ट के तरीकों में से एक को कहते हैं Response, उदाहरण के लिए, text()या json()। इन तरीकों को वास्तविक डेटा में हल किया जाता है।
• स्थिति और प्रतिक्रिया स्थिति के पाठ को प्राप्त करने के लिए गुणों statusऔर statusTextऑब्जेक्ट Responseका उपयोग करें ।
• विफलता अनुरोध को संभालने के लिए विधि catch()या निर्देश try...catchका उपयोग करें ।

नीचे दिए गए लिंक पर क्लिक करके मेरे द्वारा लिखे गए अन्य जावास्क्रिप्ट ट्यूटोरियल की एक श्रृंखला देखें: