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

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

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

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

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

XMLHttpRequest

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

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);
  });

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

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

पिछले उदाहरण में, 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-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)
  });

प्रॉमिस चेनिंग

प्रॉमिस की सबसे अच्छी सुविधाओं में से एक है, उन्हें एक साथ चेन करने की सुविधा. 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 वाला ऑब्जेक्ट बनता है. अगर पार्स नहीं हो पाता है, तो प्रॉमिस को अस्वीकार कर दिया जाता है और 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'
})