फ़ेच() के बारे में जानकारी

fetch() आपको XMLHttpRequest (XHR) से मिलते-जुलते नेटवर्क अनुरोध करने की सुविधा देता है. दोनों में मुख्य अंतर यह है कि फे़च एपीआई, Promises का इस्तेमाल करता है. इसमें एक आसान एपीआई है, जो XMLHttpRequest API में जटिल कॉलबैक से बचने में आपकी मदद करता है.

अगर आपने पहले कभी प्रॉमिस का इस्तेमाल नहीं किया है, तो JavaScript प्रॉमिसेस के बारे में जानकारी देखें.

फ़ेच करने का बुनियादी अनुरोध

यहां एक उदाहरण दिया गया है, जिसे XMLHttpRequest और फिर fetch की मदद से लागू किया गया है. हम यूआरएल का अनुरोध करना चाहते हैं, उसका जवाब पाना चाहते हैं, और उसे JSON के तौर पर पार्स करना चाहते हैं.

XMLHttpRequest

कामयाब और गड़बड़ी के मामलों को हैंडल करने के लिए, XMLHttpRequest को दो लिसनर की ज़रूरत होती है. साथ ही, इसके लिए open() और send() को कॉल करना होता है. एमडीएन दस्तावेज़ों का उदाहरण.

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

function reqError(err) {
    console.log('Fetch Error :-S', 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(
  function(response) {
    if (response.status !== 200) {
      console.log('Looks like there was a problem. Status Code: ' +
        response.status);
      return;
    }

    // Examine the text in the response
    response.json().then(function(data) {
      console.log(data);
    });
  }
  )
  .catch(function(err) {
    console.log('Fetch Error :-S', err);
  });

XHR उदाहरण की तरह काम करने के लिए, fetch() अनुरोध में सिर्फ़ एक कॉल की ज़रूरत होती है. रिस्पॉन्स को प्रोसेस करने के लिए, हम पहले जांच करते हैं कि रिस्पॉन्स का स्टेटस 200 है या नहीं. इसके बाद, रिस्पॉन्स को JSON के तौर पर पार्स किया जाता है. fetch() अनुरोध का जवाब Stream ऑब्जेक्ट है. इसका मतलब है कि json() तरीके को कॉल करने के बाद, प्रॉमिस दिखता है. स्ट्रीम एसिंक्रोनस रूप से होती है.

जवाब का मेटाडेटा

पिछले उदाहरण में, Response ऑब्जेक्ट का स्टेटस दिखाया गया था और रिस्पॉन्स को JSON के तौर पर पार्स करने का तरीका दिखाया गया था. यहां हेडर जैसे अन्य मेटाडेटा को मैनेज करने का तरीका बताया गया है जिसे आप ऐक्सेस करना चाहते हैं:

fetch('users.json').then(function(response) {
    console.log(response.headers.get('Content-Type'));
    console.log(response.headers.get('Date'));

    console.log(response.status);
    console.log(response.statusText);
    console.log(response.type);
    console.log(response.url);
});

जवाब के प्रकार

जब हम फ़ेच करने का अनुरोध करते हैं, तो रिस्पॉन्स को response.type "basic", "cors" या "opaque" दिया जाता है. ये types दिखाते हैं कि संसाधन कहां से आया है और इनका इस्तेमाल यह तय करने के लिए किया जा सकता है कि रिस्पॉन्स ऑब्जेक्ट को कैसे मैनेज किया जाए.

जब ब्राउज़र उसी ऑरिजिन पर किसी रिसॉर्स के लिए अनुरोध करता है, तो रिस्पॉन्स में एक basic टाइप होता है. साथ ही, यह तय किया जाता है कि रिस्पॉन्स से क्या देखा जा सकता है.

अगर किसी दूसरे ऑरिजिन पर किसी संसाधन के लिए अनुरोध किया जाता है और उस ऑरिजिन से CORs हेडर मिलते हैं, तो टाइप cors होता है. cors रिस्पॉन्स, basic रिस्पॉन्स की तरह ही होते हैं, लेकिन इनसे Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, और Pragma तक सीमित हेडर दिखते हैं.

opaque जवाब किसी अलग ऑरिजिन से आते हैं, जो सीओआरएस हेडर नहीं दिखाते. ओपेक रिस्पॉन्स की मदद से, हम न तो अनुरोध किए गए डेटा को पढ़ पाएंगे और न ही अनुरोध की स्थिति देख पाएंगे. इसका मतलब है कि आपके पास यह जांच करने का विकल्प नहीं होगा कि अनुरोध स्वीकार किया गया या नहीं.

आप फ़ेच करने के अनुरोध के लिए कोई मोड तय कर सकते हैं, ताकि सिर्फ़ कुछ खास तरह के अनुरोधों का समाधान किया जा सके. नीचे दिए गए मोड सेट किए जा सकते हैं:

• same-origin सिर्फ़ एक ही ऑरिजिन पर एसेट के अनुरोधों को स्वीकार करता है और अन्य सभी अनुरोधों को अस्वीकार कर देता है.
• cors, एक ही ऑरिजिन और दूसरे ऑरिजिन पर ऐसी एसेट के लिए अनुरोधों को अनुमति देता है जो सही सीओआर हेडर दिखाते हैं.
• कोई भी अनुरोध करने से पहले, cors-with-forced-preflight प्रीफ़्लाइट जांच करता है.
• no-cors का मकसद ऐसे अन्य ऑरिजिन को अनुरोध करना है जिनमें सीओआरएस हेडर नहीं हैं और किस वजह से opaque रिस्पॉन्स मिलता है. हालांकि, जैसा कि बताया गया है , इस समय विंडो ग्लोबल स्कोप में ऐसा नहीं किया जा सकता.

मोड तय करने के लिए, fetch अनुरोध में विकल्प ऑब्जेक्ट को दूसरे पैरामीटर के तौर पर जोड़ें और उस ऑब्जेक्ट में मोड तय करें:

fetch('http://some-site.com/cors-enabled/some.json', {mode: 'cors'})
    .then(function(response) {
    return response.text();
    })
    .then(function(text) {
    console.log('Request successful', text);
    })
    .catch(function(error) {
    log('Request failed', error)
    });

शॉर्ट वीडियो बनाने का वादा

वादों की एक बड़ी सुविधा यह है कि उन्हें एक साथ जोड़कर दिखाया जा सकता है. इसकी मदद से, fetch() के लिए, फ़ेच करने के अनुरोधों के बीच लॉजिक शेयर किया जा सकता है.

अगर JSON API का इस्तेमाल किया जा रहा है, तो आपको स्टेटस की जांच करनी होगी और हर जवाब के लिए, JSON को पार्स करना होगा. आपके पास अपने कोड को आसान बनाने के लिए, अलग-अलग फ़ंक्शन में स्टेटस और JSON पार्स करने की सुविधा होती है. ये फ़ंक्शन, प्रॉमिस रिटर्न करने वाले फ़ंक्शन में करते हैं. साथ ही, फ़ेच करने के अनुरोध का इस्तेमाल सिर्फ़ फ़ाइनल डेटा और गड़बड़ी वाले मामले को हैंडल करने के लिए किया जा सकता है.

function status(response) {
    if (response.status >= 200 && response.status < 300) {
    return Promise.resolve(response)
    } else {
    return Promise.reject(new Error(response.statusText))
    }
}

function json(response) {
    return response.json()
}

fetch('users.json')
    .then(status)
    .then(json)
    .then(function(data) {
    console.log('Request succeeded with JSON response', data);
    }).catch(function(error) {
    console.log('Request failed', error);
    });

इस उदाहरण में, status फ़ंक्शन के बारे में बताया गया है, जो response.status की जांच करता है और समाधान की गई प्रॉमिस को Promise.resolve() या अस्वीकार किए गए प्रॉमिस को Promise.reject() के तौर पर दिखाता है. fetch() चेन में, यह पहला कॉल किया गया तरीका है.

अगर प्रॉमिस रिज़ॉल्व हो जाता है, तो स्क्रिप्ट json() तरीके को कॉल करती है. यह तरीका, response.json() कॉल से दूसरा प्रॉमिस दिखाता है और पार्स किया गया JSON वाला ऑब्जेक्ट बनाता है. अगर पार्स नहीं हो पाता है, तो प्रॉमिस को अस्वीकार कर दिया जाता है और कैच स्टेटमेंट लागू हो जाता है.

इस स्ट्रक्चर की मदद से, आपके पास फ़ेच करने के सभी अनुरोधों के बीच लॉजिक शेयर करने की सुविधा होती है. इससे कोड को मैनेज करना, पढ़ना, और टेस्ट करना आसान हो जाता है.

पोस्ट अनुरोध

कभी-कभी किसी वेब ऐप्लिकेशन को POST के तरीके से एपीआई को कॉल करना पड़ता है और अनुरोध के मुख्य हिस्से में कुछ पैरामीटर शामिल करने पड़ते हैं. ऐसा करने के लिए, fetch() विकल्पों में method और body पैरामीटर सेट करें:

fetch(url, {
    method: 'post',
    headers: {
        "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
    },
    body: 'foo=bar&lorem=ipsum'
    })
    .then(json)
    .then(function (data) {
    console.log('Request succeeded with JSON response', data);
    })
    .catch(function (error) {
    console.log('Request failed', error);
    });

फ़ेच करने के अनुरोध के साथ क्रेडेंशियल भेजें

कुकी जैसे क्रेडेंशियल की मदद से फ़ेच करने का अनुरोध करने के लिए, अनुरोध की credentials वैल्यू को "include" पर सेट करें:

fetch(url, {
    credentials: 'include'
})