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

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

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

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

पिछले उदाहरण में, रिस्पॉन्स ऑब्जेक्ट और इस रिस्पॉन्स को 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);
});

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

फ़ेच करने का अनुरोध करने पर, इसके जवाब में response.type दिया जाएगा "basic" में से, "cors" या "opaque". इन 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)
  });

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

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

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

पोस्ट अनुरोध

कभी-कभी किसी वेब ऐप्लिकेशन को 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);
  });

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

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

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