0

サーバーからデータにアクセスし、フォーマットされたデータを関数のコンシューマーに返すライブラリを作成しています。これが私が欲しいものの例です：

// my code
var model = function () {
    return $.ajax(myRequest).done(function (rawData) {
        return treatment(data);
    });
}

// client code
var useModel = function () {
    var modelPromise = model();
    modelPromise.done(function (formattedData) { // consume this result })
}

ここで、formattedData は rawData ではなく、最初に実行したコールバックの結果です。

あなたはなにか考えはありますか？

ありがとう

R.

4

2 に答える 2

1

レジス、

.then()に関するjQueryのドキュメントには次のように書かれています：

jQuery 1.8 の時点で、 deferred.then() メソッドは、関数を介して deferred のステータスと値をフィルタリングできる新しい promise を返し、現在非推奨となっている deferred.pipe() メソッドを置き換えます。

の 2 番目の例.then()は、必要なものに似ています (ただし、ajax は関係ありません)。

私が知る限り、コードに必要な変更はごくわずかです。

// my code
var model = function () {
    return $.ajax(myRequest).then(function (rawData) {
        return treatment(rawData);
    });
}

// client code
var useModel = function () {
    var modelPromise = model();
    modelPromise.done(function (formattedData) { // consume this result })
}
于 2013-01-25T05:35:47.720 に答える
0

レジス、

私はビートルートの答えがとても好きです。この概念を自分で理解しようとして作成した例を次に示します。 jQuery を使用した複数の非同期リクエスト。

jsFiddle からのソース:

var logIt = function (msg) {
    console.log(((new Date()).toLocaleTimeString()) + ": " + msg);
}, pauseBrowser = function (ms) {
    ms += new Date().getTime();
    while (new Date() < ms) {}
}, dataForService1 = {
    json: JSON.stringify({
        serviceNumber: 1,
        description: "Service #1's data",
        pauseAfterward: 3 // for pausing the client-side
    }),
    delay: 0 // delay on the server-side
}, dataForService2 = {
    json: JSON.stringify({
        serviceNumber: 2,
        description: "Service #2's data",
        pauseAfterward: 1
    }),
    delay: 0 // delay on the server-side
};

function getAjaxConfiguration() {
    return {
        type: 'POST',
        url: '/echo/json/',
        success: function (data) {
            var msg = "Handling service #" + data.serviceNumber + "'s success";
            logIt(msg);
            logIt(JSON.stringify(data));
        }
    };
}

var async2 = function () {
    var ajaxConfig = $.extend(getAjaxConfiguration(), {
        data: dataForService2
    });
    return $.ajax(ajaxConfig);
};

var async1 = function () {
    var ajaxConfig = $.extend(getAjaxConfiguration(), {
        data: dataForService1
    });
    return $.ajax(ajaxConfig);
};

var do2AsynchronousFunctions = function () {
    var dfd = new $.Deferred();

    async1()
    .then(function (async1ResponseData) {
        logIt("async1's then() method called, waiting " + async1ResponseData.pauseAfterward + " seconds");
        pauseBrowser(async1ResponseData.pauseAfterward * 1000);
    })
    .done(function (a1d) {
        logIt("async1's done() method was called");
        return async2()
        .then(function (async2ResponseData) {
            logIt("async2's then() method called, waiting " + async2ResponseData.pauseAfterward + " seconds");
            pauseBrowser(async2ResponseData.pauseAfterward * 1000);
        })
        .done(function (a2d) {
            logIt("async2's done() method was called");
            dfd.resolve("final return value");
        });
    });

    return dfd.promise();
};

$.when(do2AsynchronousFunctions()).done(function (retVal) {
    logIt('Everything is now done! Final return value: ' + JSON.stringify(retVal));
});
于 2013-01-25T17:40:01.017 に答える