JSFiddle - React, Tailwind, and code Playground
by Jason Davis
HTML
<script src="//apollowebstudio.com/labs/js/sugarcrm-pm/js/rsvp.min.js"></script>
JavaScript RSVP.js Promise Library Demo
JavaScript
var jsonPromiseCache = {};
// AJAX function to load JSON data using Promise()
var getJsonDataPromise = function(url, key) {
if (!jsonPromiseCache[key]) {
jsonPromiseCache[key] = new RSVP.Promise(function(resolve, reject){
// If jsonPromiseCached data is not set then make AJAX requiest to get it
var client = new XMLHttpRequest();
client.open("GET", url);
client.onreadystatechange = handler;
client.responseType = "json";
client.setRequestHeader("Accept", "application/json");
client.send();
console.log('---- "client" XMLHttpRequest/AJAX variable ======= ',client);
function handler() {
if (this.readyState === this.DONE) {
// On AJAX success, resolve() our Promise() and set result to cached variable
// to avoid duplicate AJAX requests for this jsonCache[key] Data where "key"
// is used to assign to each AJAX endpoint URL/request of JSON data...
// (milestones, tasks, users, etc...)
if (this.status === 200) {
jsonPromiseCache[key] = this.response;
console.log('---- jsonPromiseCache['+key+'] ====== ',jsonPromiseCache[key]);
// Resolve() the Promise() on AJAX success
resolve(this.response);
// On AJAX failure, reject() our Promise()
}else{
reject(this);
}
}
};
// If JSON data for this key is already jsonPromiseCached, then return the jsonPromiseCached version
// instead of making a new AJAX request!
});
}
return jsonPromiseCache[key];
};
// testing a non ajax Promise
function initDomEvents() {
var eventsLoaded = true;
if (eventsLoaded) {
jsonPromiseCache['domevents'] = eventsLoaded;
console.log('---- initDomEvents[domevents] ====== ');
// Resolve() the Promise()
resolve(jsonPromiseCache['domevents']);
//...