Question

我在短时间内使用 q 库，并且我已成功处理以顺序方式从ajax获取的数据。

通过顺序处理数据，我的意思是在每次ajax调用之后，我会做一组 .then（ function（）{} ）并继续下一步ajax电话......

作为处理单个数据条目（ajax数据）的一部分，我必须在屏幕上输出ajax的结果。我有一个延迟的对象，我在从ajax数据输入文本到div后解析 - 我正在通知（使用Q的 progressHandler ）我完成了将文本输入div（100％的文本是进入div）。

在q的0.9.6版中，一切都按预期工作。但是由于某种原因，由于0.9.7版，我得到了一个TypeError {}：s 显然，延迟对象不会传播进度并因某些原因而失败。更改日志对我没有多大帮助：q changelog。

我准备了2个版本的代码，尽可能简化它。这是适用的版本 - 0.9.6和不起作用的版本 - 0.9.7。两个示例都有相同的代码，唯一的区别是q库的版本。

我对CSS部分中的代码有一个解释。我希望我在那里尽可能清楚。

如果这是一个愚蠢的问题，我会事先道歉。

由于我不能只发布JSFiddle链接，这里是代码：

我使用的

图书馆：

的jQuery
aakaxFake by ANas Nakawa
Teletype（我 - 用于在div中键入文本）
yodaProgress（我 - 图形进度条。具有.progress（步骤0.00 - 1.00）和.isDone（）函数）
q v.9.9.6 / q v.9.7.7

HTML ：

<div id="progress_1"></div>

的Javascript ：

$(document).ready(function() {

    // For DEFERRED object (referencing in 2.2.1)
    var mainObject = {
    }

    // For fake ajax Data
    $.ajax.fake.registerWebservice('blah', function (data) {
        return {
            result: 'My fake ajax result should be typed into the div!', 
        };
    });

    // 1. START
    var nextTick = Q.when();

    // 2. PROCESS 3 ITEMS SEQUENTIALLY
    for (var i = 0, length = 3; i < length; i ++) {
        nextTick = nextTick.then(
            processAjaxCall,
            function(error)     { console.log("This is an error 2.");   },
            function(progress)  { console.log("This is a progress 2."); }
        );

    }

    // 3. FINALLY DO THIS
    nextTick.fin(
        function(result)    { console.log("This is a final result 3.");     },
        function(error)     { console.log("This is an error 3.");   },
        function(progress)  { console.log("This is a progress 3.");}
    );


    // 2.0   ONE OF 3 SEQUENTIALL ITEMS
    function processAjaxCall () {

        var fakeResult;

        // 2.1.   AN AJAX DATA
        var promise = Q.when(
            fakeAjax()
        );

        // 2.2.   SETTING OF TEXT (from 2.1.) INTO DIV
        var promiseToDo = promise.then(
            function (result) {
                console.log("Result of ajax call:", result);
                return setText(result);
            },
            function (error)    { console.log("Ajax call error 2.2:", error);       },
            function (progress) { console.log("Ajax call progress 2.2:", progress); }
        );

        // 2.3. SETTING OF PROGRESS (100% - color green for a DIV)
        return promiseToDo.then(
            function (result) {
                console.log("Text was set 2.3");
            }, 
            function (error) {
                console.log("Error 2.3:", error);
            }, 
            function (progress) {

                var promiseElement = new YodaProgress(

                    $("#progress_1")

                    ,{
                        doneCSSRule: {
                            'background-color': "#00CC00"
                        }
                    }
                );

                promiseElement.progress(parseFloat(progress).toFixed(2));

                if (promiseElement.isDone()) {
                    mainObject.deferred.resolve();
                }

                //console.log("2.3 Progress %:", progress);
            }
        );

    }


    // 2.1.1 - a fake Ajax Data
    // Anas Nakawa
    // https://github.com/anasnakawa/jquery.ajax.fake
    function fakeAjax () {
        return $.ajax({
            type:'GET',
            dataType:'jsonp',
            fake: true,
            url:'blah'
        });
    }

    // 2.2.1 - setting text into a DIV
    function setText (result) {

        console.log('Passing in result:', result);
        console.log('About to set text to:', result.result);

        mainObject.deferred = Q.defer();
        promise = mainObject.deferred.promise.when(

            // Teletype is a library to type text into a DOM element
            // as if human was typing, sorta
            Teletype(
                document.getElementById("progress_1"), 
                result.result, 
                40, 
                true, 
                function (i, l) {

                    mainObject.deferred.notify(
                        parseFloat((i+1)/l).toFixed(2)
                    );
                }
            )
            //,function(error)      { console.log("This is an error 2.2.1", error);       }
            //,function(progress)   { console.log("This is a progress 2.2.1", progress);}
        );
        console.log("RETURNING PROMISE");
        return promise;
    }


});

解释：

  If it is v. 0.9.7 I GET a "TypeError {}" and div is typed in differently
  If it is v. 0.9.6 it works as expected.

  Code Explanation:

  Forget the ugliness and everything.
  This code is modified for illustrative purposes.

  What this code does is basically this:

  - Process 3 sequential function calls

    - these calls turns out to consist of:

      - an ajax Call
      - setting div #progress_1 TEXT with ajaxCall response
      - on progress of setting text into a #progress_1 div make DIV green.
 */

P.S。当我加载页面并稍后在Chrome中打开一个控制台时，我得到一个我可以检查的TypeError对象，它说“对象没有'when（）'方法。”这给了我从哪里开始的线索。在此之前，如果在我加载页面之前在Chrome中打开控制台，则只会显示“TypeError {}”消息。必须更多地研究为何如此巨大的操作差异。

非常感谢！

Answer 1

好的，我已经解决了这个问题：p

显然，延迟对象的结构在0.9.7版本内部发生了变化。奇怪的 changelog 文件显示有关“0.9.6”部分下的更改的信息。

当我在0.9.6中检查控制台

时

var deferred = Q.defer();
deferred.promise.__proto__

我可以看到when()功能在那里。并且deferred.promise不是一个真正的Promise对象，但有些不同？

但是当我在版本0.9.7中检查相同时

var deferred = Q.defer();
deferred.promise.__proto__

我找回了具有then()方法和'when（）`方法不再存在的Promise对象。

所以，更改日志有误导性，或者我可能会失去理智。

如果我去GitHub q library's repo，并选择“Tags” - ＆gt; “0.9.6” - ＆gt; “CHANGES.md”文件，文件的最上面部分显示“0.9.5”部分。所以我假设作者试图传达这些是 FROM 0.9.5 的变化 0.9.6。

也许这是有道理的，因为主分支列出 0.9.7 下的变化，所以它们再次将 FROM 0.9.7更改为下一个版本（我假设0.9.8 ）。

现在我知道最好不要相信更改日志中的数字！：P

感谢所有参与的人！

将Q库版本从0.9.6更改为0.9.7的问题

1 个答案: