使用 RSVP.js Promise 库运行多个 JavaScript Promise

Question

下面的简单演示 JavaScript 代码使用 RSVP.js Promise 库 https://github.com/tildeio/rsvp.js/ 使用 AJAX 加载一些 JSON 数据，并在加载完所有 JSON 数据后触发一些代码。

我想扩展它以在 JSON 数据加载后执行更多不是 AJAX 请求的 Promise。

例如，在 JSON 数据加载后，我想创建另一个 Promise，它将运行一个设置一些 DOM 事件处理程序/侦听器的函数。

在设置事件处理的函数之后，我想在事件设置完成后运行其他函数。

我很新，还在学习 Promises，在某些情况下还在学习 JavaScript，所以我可以使用一些帮助。非常感谢在下面和 JSFIddle 上扩展我的示例代码！

我相信，如果展示了如何在我的演示中再添加 1 个 promise，那么我在最终应用中添加任意数量的 promise 就足够了。

JSFIddle Demo代码如下：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.
});

---

---

更新

我在这里更新了我的 JSFiddle 演示 http://jsfiddle.net/jasondavis/fttzoggj/2 添加了一个新函数 initDomEvents() 并将其添加到 then(initDomEvents) 调用中。我的控制台显示一切都按照我的意愿运行，但是由于某种原因，现在我的错误被触发了

Answer 1

您使用 RSVP 的任何具体原因？我会切换到 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
});

Answer 2

我的控制台显示一切都按照我的意愿运行，但是由于某种原因，现在我的错误被触发了

initDomEvents 函数中没有 resolve 和 reject 函数。它们仅作为 new RSVP.Promise(…) 回调的参数提供。尝试调用它们会引发错误，该错误会被捕获并传播到您的错误处理程序（但它没有 .statusText 属性，因此只打印了 undefined）。

正如我在 cmets 中所说，如果您的函数不执行任何异步操作，则无需返回承诺。您只需 return 一个值或 throw 一个异常以及来自您的承诺回调。
如果您坚持围绕您的结果或拒绝创建承诺，您可以使用RSVP.Promise.resolve(…) 或RSVP.Promise.reject(…) 函数来创建已履行/拒绝的承诺对象。