इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

Matt Gaunt

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

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

अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

अगर आपने पहले कभी वाद इससे पहले, 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() तरीके को कॉल करते हैं, तो एक प्रॉमिस दिखाया जाता है. स्ट्रीम एसिंक्रोनस रूप से होती है.

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

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

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

पोस्ट अनुरोध

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

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

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

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

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