मैं मान रहा हूँ कि आप जानते हैं कि एक देशी XHR अनुरोध कैसे किया जाता है (आप यहाँ और यहाँ ब्रश कर सकते हैं )
चूंकि कोई भी ब्राउज़र जो मूल वादों का समर्थन करता हैxhr.onload , वह भी समर्थन करेगा , हम सभी onReadyStateChangeटोमफूलरी को छोड़ सकते हैं । चलो एक कदम पीछे लेते हैं और कॉलबैक का उपयोग करते हुए एक बुनियादी XHR अनुरोध फ़ंक्शन के साथ शुरू करते हैं:
function makeRequest (method, url, done) {
var xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.onload = function () {
done(null, xhr.response);
};
xhr.onerror = function () {
done(xhr.response);
};
xhr.send();
}
// And we'd call it as such:
makeRequest('GET', 'http://example.com', function (err, datums) {
if (err) { throw err; }
console.log(datums);
});
हुर्रे! इसमें कुछ भी जटिल नहीं है (जैसे कस्टम हेडर या POST डेटा) लेकिन हमें आगे बढ़ने के लिए पर्याप्त है।
वादा निर्माता
हम ऐसा वादा कर सकते हैं:
new Promise(function (resolve, reject) {
// Do some Async stuff
// call resolve if it succeeded
// reject if it failed
});
वादा निर्माता एक फ़ंक्शन लेता है जिसे दो तर्क पारित किए जाएंगे (चलो उन्हें कॉल करें resolveऔर reject)। आप कॉलबैक के रूप में सोच सकते हैं, एक सफलता के लिए और एक असफलता के लिए। उदाहरण बहुत बढ़िया हैं, आइए makeRequestइस निर्माता के साथ अपडेट करें:
function makeRequest (method, url) {
return new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.onload = function () {
if (this.status >= 200 && this.status < 300) {
resolve(xhr.response);
} else {
reject({
status: this.status,
statusText: xhr.statusText
});
}
};
xhr.onerror = function () {
reject({
status: this.status,
statusText: xhr.statusText
});
};
xhr.send();
});
}
// Example:
makeRequest('GET', 'http://example.com')
.then(function (datums) {
console.log(datums);
})
.catch(function (err) {
console.error('Augh, there was an error!', err.statusText);
});
अब हम कई XHR कॉल का पीछा करते हुए (और कॉल .catchपर त्रुटि के लिए ट्रिगर करेंगे) वादों की शक्ति में टैप कर सकते हैं :
makeRequest('GET', 'http://example.com')
.then(function (datums) {
return makeRequest('GET', datums.url);
})
.then(function (moreDatums) {
console.log(moreDatums);
})
.catch(function (err) {
console.error('Augh, there was an error!', err.statusText);
});
हम POST / PUT परम और कस्टम हेडर दोनों को जोड़कर इसे अभी भी और बेहतर बना सकते हैं। हस्ताक्षर के साथ, कई तर्कों के बजाय एक विकल्प ऑब्जेक्ट का उपयोग करें:
{
method: String,
url: String,
params: String | Object,
headers: Object
}
makeRequest अब कुछ इस तरह दिखता है:
function makeRequest (opts) {
return new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open(opts.method, opts.url);
xhr.onload = function () {
if (this.status >= 200 && this.status < 300) {
resolve(xhr.response);
} else {
reject({
status: this.status,
statusText: xhr.statusText
});
}
};
xhr.onerror = function () {
reject({
status: this.status,
statusText: xhr.statusText
});
};
if (opts.headers) {
Object.keys(opts.headers).forEach(function (key) {
xhr.setRequestHeader(key, opts.headers[key]);
});
}
var params = opts.params;
// We'll need to stringify if we've been given an object
// If we have a string, this is skipped.
if (params && typeof params === 'object') {
params = Object.keys(params).map(function (key) {
return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
}).join('&');
}
xhr.send(params);
});
}
// Headers and params are optional
makeRequest({
method: 'GET',
url: 'http://example.com'
})
.then(function (datums) {
return makeRequest({
method: 'POST',
url: datums.url,
params: {
score: 9001
},
headers: {
'X-Subliminal-Message': 'Upvote-this-answer'
}
});
})
.catch(function (err) {
console.error('Augh, there was an error!', err.statusText);
});
एक अधिक व्यापक दृष्टिकोण में पाया जा सकता MDN ।
वैकल्पिक रूप से, आप फ़िश एपीआई ( पॉलीफ़िल ) का उपयोग कर सकते हैं ।