Run multiple JavaScript Promises with RSVP.js Promise Library

Question

The simple demo JavaScript code below uses the RSVP.js Promise Library https://github.com/tildeio/rsvp.js/ to load some JSON data using AJAX and on completion fires off some code after all JSON data has loaded.

I am wanting to expand it to do some more Promises after the JSON data has loaded that are not AJAX requests.

For example after JSON data has loaded, I want to create another Promise which will run a function that will setup some DOM Event handlers/listeners.

After the function that sets up the Events handling, I would like to then run some other function after the events have finished being setup.

I am very new and learning Promises still and in some cases still learning JavaScript so I could use some help. An example code expanding mine below and on the JSFIddle would be very grateful for!

I believe if shown how to add 1 more promise to my demo then it will be enough for me to add as many as I need in my final app.

JSFIddle Demo of code below: http://jsfiddle.net/jasondavis/fttzoggj/

---

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];
};

---

// EXAMPLE USAGE DEMO
// usage loading JSON data with AJAX using Promises
var promises = {
    users: getJsonDataPromise('/echo/json/', 'users'),
    task: getJsonDataPromise('/echo/json/', 'task')
};


RSVP.hash(promises)
.then(function(results) {
  console.log('then() function ran on success of loading JSON data');
  console.log(results);
  console.log('results.users', results.users); // print the users JSON results
  console.log('results.task', results.task); // print the task JSON results

  // I want to create another Promise here which will run a function that creates a bunch of DOM Event handlers/listeners and in that function when it is done loading it should fire a success like the above does when JSON data is done loading
})
.finally(function(){
  console.log('finally() function ran on success and failure.... It is always ran!');
})
.catch(function(reason){
  console.log('[ERROR] REASON:',reason.statusText); //if any of the promises fails.
});

---

---

UPDATE

I have updated my JSFiddle demo here http://jsfiddle.net/jasondavis/fttzoggj/2 adding a new function initDomEvents() and added it to a then(initDomEvents) call. MY console shows all is ran as I want it to however for some reason, now my error is triggered

Answer 1

My console shows all is ran as I want it to however for some reason, now my error is triggered

There are no resolve and reject functions in your initDomEvents function. They are provided as the arguments to the new RSVP.Promise(…) callback only. Trying to call them throws an error, which is caught and propagated to your error handler (but it doesn't have a .statusText property, so only undefined is printed).

As I said in the comments, if your function does nothing asynchronous there is no need to return a promise. You just return a value or throw an exception as well from your promise callback.
If you insist on creating promises around your results or rejections, you can use the RSVP.Promise.resolve(…) or RSVP.Promise.reject(…) functions to create fulfilled/rejected promise objects.

Answer 2

Any specific reason why you're using RSVP? I'd switch to jQuery Promises.

var d = $.Deferred;

$.ajax({
 url: url,
 cache: true,
 dataType: 'json',
 success: function(data){
   d.resolve(data);
 },
 error: function(error){
   d.reject();
 }
});

$.when(d).then(function(data){
     //handle
});