JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://es6-promises.s3.amazonaws.com/es6-promise-2.0.1.js"></script>
<div id="result" style="color:green;"></div>
<div id="error" style="color:red;"></div>
JavaScript
var fetch = function (url, payload) {
var promise = new Promise(function (resolve, reject) {
var httpRequest = new XMLHttpRequest();
httpRequest.open('POST', url, true);
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
httpRequest.onreadystatechange = function (result) {
if (httpRequest.readyState === 4) {
if (httpRequest.status === 200) {
resolve(httpRequest.responseText);
} else {
reject(Error(httpRequest.status + ' for: ' + payload));
}
}
};
httpRequest.send('html=' + encodeURIComponent(payload));
});
return promise;
};
fetch('http://fiddle.jshell.net/echo/html/', "some dumb value")
.then(function (result) {
document.querySelector('#result').innerHTML = result;
}).then(undefined, function (error) {
document.querySelector('#error').innerHTML = error;
});
fetch('http://some-bad-url', "other dumb value")
.then(function (result) {
document.querySelector('#result').innerHTML = result;
}).then(undefined, function (error) {
document.querySelector('#error').innerHTML = error;
});