.then .done 承诺不使用淘汰赛和 js 在 durandal spa 中工作答案

【问题标题】：.then .done promises not working in durandal spa using knockout and js.then .done 承诺不使用淘汰赛和 js 在 durandal spa 中工作
【发布时间】：2015-04-10 03:58:44
【问题描述】：

我正在使用 Knockout jQuery 和 Require 在 Durandal 开发一个 SPA。我的问题是当我对我的 API 进行 ajax 调用时，我实际上并没有在 .then 语句之外获取我的数据（当我用下面注释掉的行替换我的 Get 方法时）。但是，如果我使用当前调用我不能使用 .then 它给我一个类型未定义的错误。我看过 Durandal，他们解释了如何使用 Q，我有它并在我的主目录中引用。不确定提到的补丁here

    var getSearchResult = function (dataHolder,text) {
            //return $.getJSON('/Api/Data/GetSearchItem/' + text).done();
            jQuery.support.cors = true;
            $.ajax({
                url: '/Api/Data/GetItem/' + text,
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                    dataHolder(data);
                    var check = dataHolder();
                    return dataHolder();
                },
                error: function (e) {
                }
            });
        };

我这样调用方法：

        var search = function (searchText) {
            dtx.getSearchResult(searchResult, searchText).then(function () {//(searchResult is an observableArray
                searchFlag(true);
                var test = searchResult();//i get data here
                searchTxt(searchText);
            });
            var test1 = searchResult();//no data here
        };

【问题讨论】：

标签： jquery knockout.js single-page-application q durandal-2.0

【解决方案1】：

如果你让getSearchResult 返回一个承诺会怎样？

var getSearchResult = function (dataHolder,text) {
        //return $.getJSON('/Api/Data/GetSearchItem/' + text).done();
        jQuery.support.cors = true;
        return $.ajax({
            url: '/Api/Data/GetItem/' + text,
            type: 'GET',
            dataType: 'json'
        }).then(function(data) {
            dataHolder(data);
            var check = dataHolder();
            return dataHolder();
        });
    };

然后也让search 回报一些承诺：

    var search = function (searchText) {
        return dtx.getSearchResult(searchResult, searchText).then(function (data) {//(searchResult is an observableArray
            searchFlag(true);
            var test = searchResult();//i get data here
            searchTxt(searchText);
        });
    };

现在你可以拨打search如下：

search(searchText).then(function(data) {

});

【讨论】：

BTW，设置dataType选项是多余的，所以Ajax调用可以折叠成$.get('/Api/Data/GetItem/' + text)。但是必须注意text 的 URL 编码正确。不对其进行编码是一个错误。
哦，还有一个提示，因为淘汰赛 observables 是函数，它们可以直接用作回调：search(searchText).done(targetObservable)。
这对我有用，下面的@Jan Hommes 回答也很有帮助。非常感谢您的提示

【解决方案2】：

getSearchResult 不返回承诺。所以你不能使用 q.js 承诺。有两种方法可以解决这个问题。

好方法：实现您自己的 Promise 解析器（请参阅 q.js documentation。Deferreds 部分就是您要寻找的）

快速方法：向您的 getSearchResult 函数添加回调并使用它：

var getSearchResult = function (dataHolder,text, callback) {
        //return $.getJSON('/Api/Data/GetSearchItem/' + text).done();
        jQuery.support.cors = true;
        $.ajax({
            url: '/Api/Data/GetItem/' + text,
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                callback(data);
            },
            error: function (e) {
            }
        });
    };

然后你可以添加一个函数作为回调：

        dtx.getSearchResult(searchResult, searchText, function (data) {
                //data contains the data from your ajax request.
                searchFlag(true);
                var test = searchResult();//i get data here
                searchTxt(searchText);
            });

【讨论】：