javascript - 为什么在我的所有 Promise 成功后，使用 RSVP.js 库的 JavaScript Promise 会返回错误？

Question

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

之后，它在链式 then() 调用中运行非 ajax 函数

我的所有 Promise 都成功，但最后也返回错误!

我不确定为什么会出现错误？

JSFiddle 演示:http://jsfiddle.net/jasondavis/fttzoggj/3/

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

新的非ajax promise

// testing a  non ajax Promise
function initDomEvents() {
    var eventsLoaded = true;

    //if (eventsLoaded) {
        jsonPromiseCache['domevents'] = eventsLoaded;

        console.log('---- initDomEvents() ran');

        // Resolve() the Promise() 
        //resolve(jsonPromiseCache['domevents']);
        resolve();

        // On false, reject() our Promise()
    //}else{
    //    reject();
    //}

};

示例使用演示

// 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
})
.then(initDomEvents)
.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.
});

<小时/>

更新

这个新演示 http://jsfiddle.net/jasondavis/fttzoggj/6/添加了第三个 Promise，并且第三个 Promise 没有运行!第二个 Promise 函数 initDOmEvents() 现在返回此错误...

ERROR] REASON: ReferenceError: resolve is not defined
    at initDomEvents (http://fiddle.jshell.net/_display/:91:9)
    at G (http://apollowebstudio.com/labs/js/sugarcrm-pm/js/rsvp.min.js:2:6009)
    at F (http://apollowebstudio.com/labs/js/sugarcrm-pm/js/rsvp.min.js:2:5928)
    at L (http://apollowebstudio.com/labs/js/sugarcrm-pm/js/rsvp.min.js:2:6661)
    at MutationObserver.h (http://apollowebstudio.com/labs/js/sugarcrm-pm/js/rsvp.min.js:2:1667)

添加了新代码...

//测试非 ajax Promise

function initTaskModalLibraries() {
    var taskModalScriptsLoaded = true;

    if (taskModalScriptsLoaded) {
        jsonPromiseCache['inittaskmodallibraries'] = taskModalScriptsLoaded;

        console.log('---- initTaskModalLibraries() ran');

        // Resolve() the Promise() 
        //resolve(jsonPromiseCache['domevents']);
        resolve();

        // On false, reject() our Promise()
    }else{
        reject();
    }

};

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
})
.then(initDomEvents)
.then(initTaskModalLibraries)
.finally(function(){
  console.log('finally() function ran on success and failure.... It is always ran!');
})
.catch(function(reason){
  console.log('[ERROR] REASON:',reason); //if any of the promises fails.
});

<小时/>

更新2

我现在发现在新的非 ajax 函数中我缺少 new RSVP.Promise(function(resolve,reject){})

修复演示 http://jsfiddle.net/jasondavis/fttzoggj/8/

Answer 1

在您的 [ERROR] 日志行中，删除 .statusText，如下所示:

.catch(function(reason){
  console.log('[ERROR] REASON:',reason); //if any of the promises fails.
});

您将看到此可点击的错误:

[ERROR] REASON:
ReferenceError: resolve is not defined       initDomEvents()/_display/ (line 92)
G()                                          rsvp.min.js (line 2)
F()                                          rsvp.min.js (line 2)
L()                                          rsvp.min.js (line 2)
h()                                          rsvp.min.js (line 2)

这是一个updated fiddle我认为这符合你的意图。主要变化是:

return new RSVP.Promise(initDomEvents)  

在第一个 then 处理程序中，它将返回的结果传递给下一个 then (链接)，

并更改initDomEvents的方法签名:

function initDomEvents(resolve, reject) {

以便定义解析/拒绝。