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

Matt Gaunt

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

ब्राउज़र सहायता

• 42
• 14
• 39
• 10.1

सोर्स

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

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

यहां एक उदाहरण दिया गया है, जिसे 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 जवाब ऐसे ऑरिजिन से आते हैं जो सीओआरएस हेडर नहीं दिखाते. ओपेक जवाब के साथ हम दिए गए डेटा को पढ़ नहीं पाएंगे या अनुरोध की स्थिति नहीं देख पाएंगे. इसका मतलब है कि आपके पास यह जांच करने का विकल्प नहीं होगा कि अनुरोध पूरा हुआ या नहीं.

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

• same-origin सिर्फ़ एक ही ऑरिजिन पर मौजूद ऐसेट के अनुरोधों के लिए काम करता है और बाकी सभी अनुरोधों को अस्वीकार कर देता है.
• cors, एक ही ऑरिजिन और दूसरे ऑरिजिन पर मौजूद उन ऐसेट के अनुरोधों की अनुमति देता है जो सही CORs हेडर दिखाते हैं.
• cors-with-forced-preflight कोई भी अनुरोध करने से पहले, प्रीफ़्लाइट जांच करता है.
• no-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 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(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 तरीके से एपीआई को कॉल करना पड़ता है. साथ ही, अनुरोध के मुख्य हिस्से में कुछ पैरामीटर शामिल करने पड़ते हैं. ऐसा करने के लिए, 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'
})