আমি ধরে নিচ্ছি যে আপনি কীভাবে কোনও দেশীয় এক্সএইচআর অনুরোধ করবেন (আপনি এখানে এবং এখানে ব্রাশ করতে পারেন )
যেহেতু কোন ব্রাউজার যা সমর্থন নেটিভ প্রতিশ্রুতি এছাড়াও সমর্থন করবে xhr.onload, আমরা সব এড়িয়ে যেতে পারেন onReadyStateChangeভাঁড়ামি। আসুন আমরা এক পদক্ষেপ নেব এবং কলব্যাকগুলি ব্যবহার করে একটি প্রাথমিক এক্সএইচআর অনুরোধ ফাংশন দিয়ে শুরু করব:
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);
});
Hurray থেকে! এতে মারাত্মক জটিল কিছু (যেমন কাস্টম শিরোনাম বা পোষ্ট ডেটা) জড়িত না তবে আমাদের এগিয়ে যাওয়ার পক্ষে যথেষ্ট।
প্রতিশ্রুতি নির্মাণকারী
আমরা এর মতো একটি প্রতিশ্রুতি তৈরি করতে পারি:
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);
});
এখন আমরা একাধিক এক্সএইচআর কলগুলি শৃঙ্খলাবদ্ধ করে প্রতিশ্রুতিগুলির শক্তিতে আলতো চাপতে পারি (এবং .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);
});
আরও বিস্তৃত পদ্ধতি এমডিএন- তে পাওয়া যাবে ।
বিকল্পভাবে, আপনি আনতে হবে API ( পলিফিল ) ব্যবহার করতে ।