By Jun -
Support me on Amazon Canada
How to turn XMLHttpRequest / XHR into a Promise so that you can chain it with other promises?
First of all, if you don't know what XMLHttpRequest is, you can check out
MDN document on XMLHttpRequest. In short, it is an API that can be used by a JavaScript to communicate to servers. It enables asynchronous HTTP requests.
 |
XMLHttpRequest Ready States |
Situation:
You might wonder why not using
Fetch (definition on MDN) which is the new way of fetching data asynchronously from servers. Well, they work quite similarly but not exactly the same. I am not sure about how many cases there are but there is this case that I have to use XHR instead of Fetch.
Issues that I faced:
Using fetch for a cross origin request(url is set in the permission in manifest) in chrome extension set origin header as null and doesn't sell referer header in the request.
Thus, I cannot use origin and referer header to identify if a request is coming from my chrome extension.
i)
Using fetch in chrome extension sends null origin header StackOverflow thread
ii)
Using fetch in chrome extension doesn't include referer header in the request StackOverflow thread
As a result, I have to use XHR to do it.
How to turn XMLHttpRequest / XHR into a promise?
This is an example of how you can return a Promise that contains an XMLHttpRequest.
function xhr(params) {
return new Promise(function(resolve, reject) {
let xhr = new XMLHttpRequest();
let url = '';
xhr.open('POST', url + params);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.responseType = 'blob';
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE && xhr.status >= 400) {
let ress = xhr.response;
if (typeof res.errorCode !== 'undefined') {
reject(new Error('Something went wrong...));
}
}
if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
let res = xhr.response;
resolve(res);
// do something with response
// let blobUrl = window.URL.createObjectURL(blob);
// resolve(blobUrl);
}
if (xhr.readyState == 2) {
// do something at HEADERS_RECEIVED state
// eg. setting responseType, setting ui etc
// xhr.responseType = 'json';
}
}
// you can also listen for onload and onerror events
// instead of using onreadystatechange
xhr.onload = function() {
// do something with response
let res = xhr.response;
resolve(res);
};
xhr.onerror = function() {
reject(new Error('error'));
};
// send request
body = JSON.stringify({ params });
xhr.send(body);
})
}
Note:
I have also created
a post in chromium extension discussion group. You can check it out and see if there is any update from chromium.
Thank you for reading!
Casino - Dr. Maryland
ReplyDeleteThe state of Maryland has more than 80 casinos and a 안성 출장샵 casino 통영 출장마사지 resort. A casino, 제천 출장샵 a racetrack and two hotels is 거제 출장마사지 located at 성남 출장샵 the corner of Rating: 4 · 1 vote