Question

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

我想扩展它以在加载JSON数据之后再做一些不是AJAX请求的Promise。

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

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

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

我相信如果展示如何为我的演示添加1个承诺，那么我将在我的最终应用中添加尽可能多的承诺。

JSFIddle演示代码如下：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

我的控制台显示所有内容都按照我的意愿运行，但出于某种原因，现在我的错误已被触发

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

正如我在评论中所说，如果你的函数没有异步，那么就不需要返回一个promise。您只需return一个值或throw一个例外以及您的承诺回调如果您坚持围绕结果或拒绝创建承诺，则可以使用RSVP.Promise.resolve(…)或RSVP.Promise.reject(…)函数创建已履行/已拒绝的承诺对象。

Answer 2

您使用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
});

使用RSVP.js Promise Library

2 个答案: