2

私は次のJSメソッドを持っています：

    var foo = function() {
        var dfd = $.Deferred();
        console.log('foo');
        dfd.resolve();
        return dfd.promise();
    };
    var ajaxCall1 = function () {
        var dfd = $.Deferred();
        $.ajax({
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            url: 'xxxxxxx',
            data: { },
            success: function(response) {
                dfd.resolve();

            }
        });
        return dfd.promise();
    };
    var ajaxCall2 = function () {
        var dfd = $.Deferred();
        $.ajax({
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            url: 'xxxxxxx',
            data: {},
            success: function (response) {
                dfd.resolve();

            }
        });
        return dfd.promise();
    };
    var ajaxCall3 = function () {
        var dfd = $.Deferred();
        $.ajax({
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            url: 'xxxxxxx',
            data: {},
            success: function (response) {
                dfd.resolve();

            }
        });
        return dfd.promise();
    };

そして私はこのコードを介してそれらを呼び出しています：

    foo().done(function () {
        return ajaxCall1();
    }).done(function () {
       return  ajaxCall2();
    }).done(function () {
        return ajaxCall3();
    });

問題は、ajaxcall1が成功する前にajaxCall2が呼び出されることです。これを修正するのを手伝ってもらえますか？前の呼び出しが成功したときに、ajax呼び出しを1つずつ行う必要があります。

4

5 に答える 5

2

$.when を使用する

var deferredObject = $.ajax({});
$.when(deferredObject)
 .then(function(){
     var deferredobject2 = $.ajax({});
     $.when(deferredobject2)
      .then(function(){ alert('after 2nd ajax call');});

  });
于 2012-04-19T05:47:10.647 に答える
1

まず第一に、 $.ajax 呼び出しの結果を直接返すことができます。それらは既に promise であるためです (中間の Deferred は必要ありません)。

var ajaxCall1 = function () {
    return $.ajax({
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        url: 'xxxxxxx',
        data: { }
    });
};
var ajaxCall2 = function () {
    return $.ajax({
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        url: 'xxxxxxx',
        data: {}
    });
};
var ajaxCall3 = function () {
    return $.ajax({
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        url: 'xxxxxxx',
        data: {}
    });
};

第二に、呼び出しを効果的に連鎖させるために使用したいのは.pipe()です。

foo().pipe(function () {
    return ajaxCall1();
}).pipe(function () {
    return  ajaxCall2();
}).pipe(function () {
    return ajaxCall3();
}).done(function() {
    // call1, call2 and call3 done in sequence
}).fail(function() {
    // one of the ajax requests failed
});
于 2012-04-20T05:29:40.573 に答える
0

SharePoint Web サービスを頻繁に使用しているときに、同様の問題が発生しました。作業を続行する前に、複数のソースからデータを取得する必要があることがよくあります。

それを解決するために、この種の機能を AJAX 抽象化ライブラリに組み込みました。完了時にハンドラーのセットをトリガーするリクエストを簡単に定義できます。ただし、各リクエストは複数の http 呼び出しで定義できます。コンポーネントは次のとおりです。

DepressedPress.com の DPAJAX

この非常に単純な例では、3 つの呼び出しで 1 つの要求を作成し、その情報を呼び出し順に 1 つのハンドラーに渡します。

    // The handler function
function AddUp(Nums) { alert(Nums[1] + Nums[2] + Nums[3]) };

    // Create the pool
myPool = DP_AJAX.createPool();

    // Create the request
myRequest = DP_AJAX.createRequest(AddUp);

    // Add the calls to the request
myRequest.addCall("GET", "http://www.mysite.com/Add.htm", [5,10]);
myRequest.addCall("GET", "http://www.mysite.com/Add.htm", [4,6]);
myRequest.addCall("GET", "http://www.mysite.com/Add.htm", [7,13]);

    // Add the request to the pool
myPool.addRequest(myRequest);

提供される他の多くのソリューションとは異なり、このメソッドは行われる呼び出しのシングル スレッド化を強制しないことに注意してください。このコンポーネントは、ユーザー定義のリクエスト数もサポートしているため、必要に応じて簡単にシングルスレッドを強制できます。また、タイムアウト値の設定と、サービスが不安定な場合の再試行もサポートしています。

この種の作業では、非常に便利です (そして信じられないほど簡単に理解できます)。

于 2012-09-08T15:03:30.580 に答える
0

簡素化する。

function foo() {
    var dfd = $.Deferred();
    console.log('foo');
    dfd.resolve();
    return dfd.promise();
}

function ajaxCall1() {
    return $.ajax({
        type: 'POST',
        dataType: 'json',
        url: 'xxxxxxx',
        data: { },
        success: function(response) {
            console.log('ajaxCall1 success');
        }
    });
    return dfd.promise();
}

// and so on for ajaxCall2 and ajaxCall3

強化する。

foo().done(function () {
    ajaxCall1().done(function () {
        ajaxCall2().done(function () {
            ajaxCall3();
        });
    });
});

http://jsfiddle.net/mattball/LxjDS/

参考文献：

于 2012-04-19T03:51:08.790 に答える
0

Frame.jsでコールバックを簡素化することを除いて、他の回答と同じ

var responses = [];
for(var i=0; i<1000; i++){
    Frame(function(callback){
        $.ajax('myserver.api', { 
            data:i, 
            type:'post', 
            complete:function(response) { 
                responses.push(response);
                callback();
            }
        });
    });
}
Frame.start();

通常、このような AJAX リクエストでブラウザーをバタンと閉めると、ブラウザーがハングし、応答変数は、送信された元の順序ではなく、受信された順序で返されます。ここでミックスに Frame を追加すると、すべてがソートされます。アウト。

または、それを使用してコールバックを平坦化することもできます。

Frame(function(next){
    foo().done(next);
});
Frame(function(next){
    ajaxCall1().done(next);
});
Frame(function(next){
    ajaxCall2().done(next);
});
Frame(function(next){
    ajaxCall3().done(next);
});
Frame(function(next){
    //do more stuff
    next();
});
Frame.start();
于 2012-04-19T05:17:24.963 に答える