AJAX響應函數（防止異步錯誤）

Question

我有一個AJAX調用的問題，以給出主函數的響應。 現在我使用異步假，我知道這是奇怪的，我試圖解決它，但一直都失敗。

這工作（異步錯誤）：

function printTable(){
    var $table = $('#Table');

    var view_data;

    $.ajax({
        type: "GET",
        url: '/api/getdata',
        success: function(response) {

        var TableData = [];

        for(var i =0;i < response.length ;i++){
                    var item = response[i];

        var sessionID = item.sessionID;

                    if(sessionID){

                        $.ajax({
                        async: false,
                        type: "POST",
                        url: '/api/getNickname',
                        dataType: "json",
                        data: {
                        id: sessionID,
                        },
                        success: function(response){
                            view_data = response;
                        }
                     });

}

TableData.push({
                        _id: item._id,
                        datum: item.datum,
                        uhrzeit: item.uhrzeit,
                        session: view_data,
                        });

        }

        $table.bootstrapTable({data: TableData});
        $table.bootstrapTable('togglePagination');
            }   
    })
}

我從這里嘗試了建議： 在不使用async的情況下為全局變量分配ajax響應：false但是由於view_data未定義而失敗。

function printTable(){
    var $table = $('#Table');

    var view_data;

    $.ajax({
        type: "GET",
        url: '/api/getdata',
        success: function(response) {

        var TableData = [];

        for(var i =0;i < response.length ;i++){
                    var item = response[i];

        var sessionID = item.sessionID;

                    if(sessionID){

                    $.ajax({
                    type: "POST",
                    url: '/api/getNickname',
                    dataType: "json",
                    data: {
                    id: sessionID,
                    }
                 }).done(function(response){
                    test(response)
                 });

                 function test(response){
                     view_data = response;
                     return view_data;
                 }

            }

}

TableData.push({
                        _id: item._id,
                        datum: item.datum,
                        uhrzeit: item.uhrzeit,
                        session: view_data,
                        });

        }

        $table.bootstrapTable({data: TableData});
        $table.bootstrapTable('togglePagination');
            }   
    })
}

我意識到的是，如果我提出警報（view_data）; 推動它之前工作！？ 我不是那么深入JS / AJAX，因為它仍在學習它，所以我希望有人可能會給我一個提示或可以幫助..如何在不使用async false的情況下將var view_data傳遞給main函數？

謝謝...

Answer 1

這與異步代碼有關

當您指定async: false ，您告訴代碼要等到此HTTP調用完成。

但是沒有async: false你的http調用是異步進行的，即程序將繼續執行，而不是實際等待HTTP調用完成，你的success函數只會在返回HTTP調用響應時執行，這將花費2 3秒但你正在訪問你的view_data這在當時是不確定的。

你可以做的是將你的push代碼移到success函數中：

function printTable（）{var $ table = $（'＃Table'）;

var view_data;

$.ajax({
    type: "GET",
    url: '/api/getdata',
    success: function(response) {

    var TableData = [];

    for(var i =0;i < response.length ;i++){
                var item = response[i];

    var sessionID = item.sessionID;

                if(sessionID){

                    $.ajax({
                    async: false,
                    type: "POST",
                    url: '/api/getNickname',
                    dataType: "json",
                    data: {
                    id: sessionID,
                    },
                    success: function(response){
                        view_data = response;
                        TableData.push({  // <- like this
                    _id: item._id,
                    datum: item.datum,
                    uhrzeit: item.uhrzeit,
                    session: view_data,
                    });
                   $table.bootstrapTable({data: TableData});
                   $table.bootstrapTable('togglePagination');


                    }
                 });

}

    }

        }   
})

}

Answer 2

這是JS異步的事情，所以當你使用async：false時，它意味着代碼下面的代碼不會執行，直到你得到響應。 聲明變量（view_data） - >異步發送AJAX請求（你不等待響應） - >下面的代碼已經執行

聲明變量（view_data） - >同步發送AJAX請求（等待響應） - >分配響應view_data - >下面代碼執行

因此，在執行ajax請求后，您將j查詢寫入成功並獲得響應

function printCatchTable() {
    var $table = $("#TableLastCaught");

    $.ajax({
        type: "GET",
        url: "/api/lastcaught",
        success: function(response) {
            var faengeTableData = [];

            for (var i = 0; i < response.length; i++) {
                var item = response[i];

                var sessionID = item.sessionID;

                if (sessionID) {
                    $.ajax({
                        type: "POST",
                        url: "/api/getSessionNickname",
                        dataType: "json",
                        data: {
                            id: sessionID
                        },
                        success: function(response) {
                            //Keep Pushing on Array
                            faengeTableData.push({
                                _id: item._id,
                                datum: item.datum,
                                uhrzeit: item.uhrzeit,
                                fischart: item.fischart,
                                gewicht: item.gewicht,
                                laenge: item.laenge,
                                koeder: item.koeder,
                                montage: item.montage,
                                gewaesser: item.gewaesser,
                                temperatur: item.temperatur,
                                luftdruck: item.luftdruck,
                                bilder: fileNames,
                                edit: item._id,
                                session: response
                            });

                            //run jquery on last element
                            if(i === response.length){//if i === response.length, it means its final element so you run jquery table
                                $table.bootstrapTable({ data: faengeTableData });
                                $table.bootstrapTable("togglePagination");
                            }
                        }
                    });
                }


            }
        }
    });
}