XMLHttpRequest बनाम API प्राप्त करें

163

मुझे पता है कि Fetch API का उपयोग होता है Promise s और दोनों आपको सर्वर से AJAX अनुरोध करने की अनुमति देते हैं।

मैंने पढ़ा है कि Fetch API में कुछ अतिरिक्त सुविधाएँ हैं, जो XMLHttpRequest(और Fetch API पॉलीफ़िल में उपलब्ध नहीं हैं , क्योंकि यह आधारित है XHR)।

Fetch API में कौन सी अतिरिक्त क्षमताएं हैं?

— ilyabasiuk
स्रोत

हालांकि मैं मौके पर याद नहीं कर सकता, एक या दो चीजें हैं जो आप एक्सएचआर के साथ कर सकते हैं जो आप नहीं ला सकते हैं। आप कहते हैं कि आपने पढ़ा है कि अतिरिक्त संभावनाएं हैं, वे लेख बहुत अच्छे नहीं हैं यदि वे यह नहीं कहते हैं कि वे क्या हैं

— Jaromanda X

उन दो चीजों को पाया जिन्हें आप एक्सएचआर के साथ नहीं कर सकते हैं ... आप

— भ्रूण

अधिकांश प्रकार के XMLHttpRequests के लिए काम करने का एक सरल तरीका है फ़ेच। यदि आपका उपयोग मामला फ़िच करता है, तो उसका उपयोग करें। जब आप इसके ठीक नीचे हो जाते हैं, तो XMLHttpRequest API बदसूरत है, जिसके लिए अधिकांश लोग इसका उपयोग करते हैं। Fetch उन चीजों को करने का एक स्वच्छ तरीका पेश करने का एक प्रयास था जिसे XMLHttpRequest के चारों ओर लिपटे एक पुस्तकालय की आवश्यकता नहीं होती है, ताकि वह इसे स्वादिष्ट बना सके।

— jfriend00

ब्राउज़रों में इसका शुद्ध समर्थन है ( caniuse.com/#search=fetch ), इसलिए इसके लिए एक पोलिफ़ है github.com/github/fetch , wich xhr से ऊपर काम कर रहा है

— ilyabasiuk

@ मार्को - आप यह कैसे नहीं कह सकते कि fetch(url).then(function(data) (...));एक XMLHttpRequestही काम करने के लिए उपयोग करने की तुलना में सरल नहीं है ? इसमें बहुत सारी अन्य विशेषताएं हो सकती हैं, लेकिन गीज़, यह निश्चित है कि सामान्य चीजों के लिए उपयोग करना सरल है। यह एक साफ अप एपीआई है।

— jfriend00

जवाबों:

120

कुछ चीजें हैं जो आप एक्सएचआर के साथ नहीं कर सकते हैं:

आप अनुरोध और प्रतिक्रिया वस्तुओं के साथ कैश एपीआई का उपयोग कर सकते हैं;
आप प्रदर्शन कर सकते हैं no-cors अनुरोधों , एक सर्वर से प्रतिक्रिया प्राप्त कर रहा है जो कॉर्स को लागू नहीं करता है। आप जावास्क्रिप्ट से सीधे प्रतिक्रिया निकाय तक नहीं पहुंच सकते, लेकिन आप इसे अन्य एपीआई (जैसे कैश एपीआई) के साथ उपयोग कर सकते हैं;
स्ट्रीमिंग प्रतिक्रियाएं (XHR के साथ पूरी प्रतिक्रिया मेमोरी में बफ़र होती है, जिससे आप निम्न-स्तरीय स्ट्रीम तक पहुंच पाएंगे)। यह सभी ब्राउज़रों में अभी तक उपलब्ध नहीं है, लेकिन जल्द ही होगा।

कुछ चीजें हैं जो आप एक्सएचआर के साथ कर सकते हैं जो आप अभी तक लाने के साथ नहीं कर सकते हैं, लेकिन वे जल्द या बाद में उपलब्ध होने जा रहे हैं ("भविष्य में सुधार" पैराग्राफ यहां पढ़ें: https: //hacks.mozilla .org / 2015/03 / this-api-is-so-fetching / ):

एक निवेदन (यह अब फ़ायरफ़ॉक्स और एज में काम करता है, जैसा कि @sideshowbarker अपनी टिप्पणी में बताता है);
रिपोर्ट की प्रगति।

यह लेख https://jakearchibald.com/2015/thats-so-fetch/ में अधिक विस्तृत वर्णन है।

— मार्को
स्रोत

Fetch API के लिए युक्ति अब रद्द करने के लिए प्रदान करती है। समर्थन अब तक फ़ायरफ़ॉक्स 57 और एज 16 में भेज दिया गया है । डेमो: fetch-abort-demo-edge.glitch.me , mdn.github.io/dom-examples/abort-api । और खुले क्रोम और वेबकिट फ़ीचर बग बगसच्रोमियम . org / p / chromium/ issues / detail ? id= 750599 , bugs.webkit.org/show_bug.cgi?id=174980 हैं । How to: Developers.google.com/web/updates/2017/09/abortable-fetch , developer.mozilla.org/en-US/docs/Web/API/AbortSignal#Examples । और कम से स्टैक ओवरफ़्लो जवाब में उदाहरण stackoverflow.com/a/47250621/441757

— sideshowbarker

एक और अंतर यह है कि fetchडेवलपर टूल पर अनुरोधों को फिर से नहीं देखा जा सकता है।

— पारजिपाल

और, मेरे अनुभव से, fetchफ़ाइलों के लिए अनुरोध कर सकते हैं, लेकिन XHR नहीं कर सकते।

— डी। परेडल

लाना

दस्तावेजों का उपभोग करने के लिए एक अंतर्निहित विधि को याद रखना
अभी तक कोई टाइमआउट सेट करने का कोई तरीका नहीं है
सामग्री-प्रकार प्रतिक्रिया शीर्षलेख को ओवरराइड नहीं कर सकता
यदि सामग्री-लंबाई प्रतिक्रिया हेडर मौजूद है, लेकिन उजागर नहीं है , तो स्ट्रीमिंग के दौरान शरीर की कुल लंबाई अज्ञात है
अनुरोध पूरा हो गया है, भले ही सिग्नल के गर्भपात हैंडलर को बुलाएगा
कोई अपलोड प्रगति ( ReadableStreamअनुरोध निकायों के लिए उदाहरणों के लिए समर्थन अभी तक नहीं है )

एक्सएचआर

कुकीज न भेजने का कोई तरीका नहीं है (इसके अलावा गैर-मानक mozAnonध्वज या AnonXMLHttpRequestकंस्ट्रक्टर का उपयोग करने से )
FormDataउदाहरणों को वापस नहीं कर सकते
करने के लिए एक समान नहीं है fetchके no-corsमोड
हमेशा पुनर्निर्देश का पालन करें

— Knu
स्रोत

fetchभी प्रगति याद आ रही है। XHR के साथ आप progressघटना के साथ प्रगति को ट्रैक कर सकते हैं

— rzr

"प्रतिक्रिया के कंटेंट-टाइप हेडर को ओवरराइड नहीं कर सकते हैं" ... यह शुरुआत के लिए एक बुरा विचार है। 'सामग्री-प्रकार यह बताता है कि क्या लौटाया जाना है और बैकेंड शेड्यूल को उस दृश्य को निर्देशित करता है। FACT में, सामग्री-प्रकार के लिए 'केवल हेडर' होना चाहिए क्योंकि जो अनुरोध किया जाता है, वह वही है जो लौटाया जाना चाहिए। यदि आप एक विशेष उपडोमेन या कुछ और से अलग सेवा चाहते हैं तो आप विशिष्ट कार्यक्षमता को अलग से संभाल सकते हैं। आप प्रत्येक गले के 99% नीचे 1% नियम को लागू करने की कोशिश कर रहे हैं।

— ओरुबेल 16'18

@ कुन्नप और अब हम अधिक उन्नत हैं और हम आसानी से एक 90% समाधान को स्वचालित कर सकते हैं और विभिन्न मामलों को अलग-अलग कार्यक्षमता के लिए मार्ग दे सकते हैं।

— ओरुबेल

@rzr बिल्कुल नहीं, आपको मिल गया Response#body।

— नं।

ऊपर दिए गए उत्तर अच्छे हैं और अच्छी अंतर्दृष्टि प्रदान करते हैं, लेकिन मैं इस Google डेवलपर्स ब्लॉग प्रविष्टि में उसी तरह की राय साझा करता हूं जिसमें मुख्य अंतर (व्यावहारिक दृष्टिकोण से) अंतर्निहित वादे की सुविधा है, जिसमें से लौटाया गया हैfetch

इस तरह कोड लिखने के बजाय

function reqListener() {
    var data = JSON.parse(this.responseText);
}

function reqError(err) { ... }

var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.onerror = reqError;
oReq.open('get', './api/some.json', true);
oReq.send();

हम चीजों को साफ कर सकते हैं और वादों और आधुनिक वाक्यविन्यास के साथ कुछ अधिक संक्षिप्त और पठनीय लिख सकते हैं

fetch('./api/some.json')
    .then((response) => {
        response.json().then((data) => { 
            ... 
        });
    })
    .catch((err) => { ... });

— फेलिप
स्रोत

@ TheOpti आप IE में बुनियादी फ़िंच सपोर्ट को पॉलीफ़िल कर सकते हैं। आप IE11 को कई प्रोजेक्ट्स में एक समर्थित ब्राउज़र के रूप में भी छोड़ सकते हैं क्योंकि कई उपयोगकर्ता बेस 11 IE का उपयोग अब 1% से कम है।

— डेवोन होल्कोम्बे