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

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

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

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

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

XMLHttpRequest

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

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

function reqError (err) {
  console.log('Fetch Error :-S', err);
}

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

लाएं

फ़ेच करने का हमारा अनुरोध कुछ ऐसा दिखता है:

fetch('./api/some.json')
  .then(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(err => {
    console.log('Fetch Error :-S', err);
  });

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

रिस्पॉन्स का मेटाडेटा

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

fetch('users.json').then(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);
});

रिस्पॉन्स के टाइप

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

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

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

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

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

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

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

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

वादे की चेन

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

अगर JSON एपीआई का इस्तेमाल किया जा रहा है, तो आपको हर जवाब के लिए स्थिति देखनी होगी और 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(data => {
    console.log('Request succeeded with JSON response', data);
  }).catch(error => {
    console.log('Request failed', error);
  });

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

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

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

POST अनुरोध

कभी-कभी किसी वेब ऐप्लिकेशन को 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(data => {
    console.log('Request succeeded with JSON response', data);
  })
  .catch(error => {
    console.log('Request failed', error);
  });

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

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

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