Warum wird das Array nicht mit der Ajax-Antwort gefüllt?

Question

Unten ist mein Code in einer JavaScript-Datei, die in einer HTML-Datei enthalten ist. Wenn ich console.log msg kann ich sehen, gibt es 100 Elemente im Array (siehe Screenshot), aber dataArray ist immer noch nach der letzten console.log (dataArray).

Ich bekomme keine Fehler oder solche Sachen, so dass es schwer für mich ist, dies zu debuggen.

function loadPosts() { 
    var dataArray = new Array(); 
    var root = 'https://jsonplaceholder.typicode.com'; 
    $.ajax({ 
    url: root + '/posts/', 
    method: 'GET', 
    success:function(msg){ 
     dataArray = msg; 
    } 
    }); 

    console.log(dataArray); 
} 

window.onload = loadPosts; 

Answer 1

Ihre console.log ausgeführt wird vor den Erfolg Handler AJAX-Request aufgerufen wird, ansonsten sieht es richtig. Sie können console.log(dataArray) hinzufügen, nachdem Sie im Callback dataArray = msg; zugewiesen haben, um es zu sehen.

Answer 2

console.log wird ausgeführt, bevor der Ajax-Aufruf abgeschlossen ist. also asynchrone Anfrage machen.

function loadPosts() { 
    var dataArray = new Array(); 
    var root = 'https://jsonplaceholder.typicode.com'; 
    $.ajax({ 
    url: root + '/posts/', 
    method: 'GET', 
    async:false,// <-- 
    success:function(msg){ 
     dataArray = msg; 
    } 
    }); 
    console.log(dataArray); 
} window.onload = loadPosts; 

Answer 3

AJAX von Natur aus asynchron ist, so was passiert, ist, dass Sie die Ausführung:

1. Ajax-Aufruf
2. console.log (dataarray)
3. Erfolg Rückruf

Für die gewünschte Ausgabe sollten Sie Ihr Konsolenprotokoll in den Success-Handler verschieben:

function loadPosts() { 
    var dataArray = new Array(); 
    var root = 'https://jsonplaceholder.typicode.com'; 
    $.ajax({ 
     url: root + '/posts/', 
     method: 'GET', 
     success:function(msg){ 
     dataArray = msg; 
     // act on data array 
     console.log(dataArray); 
     } 
    }); 
} 

ich auch von den Erfolg/Fehler Rückrufe Promises empfehlen bewegen würde, da die Rückrufe sind veraltet und entfernt, wie von jQuery 3. Dieser Code wie so ändern würde:

function loadPosts() { 
    var root = 'https://jsonplaceholder.typicode.com'; 
    return $.ajax({ 
     url: root + '/posts/', 
     method: 'GET' 
    }); 
} 

loadPosts().then(function(data) { 
    // resolve promise handler 
    // do something with your data 
    console.log(data); 
}, function(err) { 
    // rejected promise handler (failure) 
    console.error(data); 
}); 

Für weitere Informationen :

jQuery Ajax Documentation

Promise Spec

Answer 4

Prüfen Sie diesen Code unter:

function loadPosts() { 
 
    var dataArray = []; 
 
    var root = 'https://jsonplaceholder.typicode.com'; 
 
    $.ajax({ 
 
    url: root + '/posts/', 
 
    method: 'GET', 
 
    success:function(msg){ 
 
     console.log('First'); 
 
     dataArray = msg; 
 
    } 
 
    }); 
 
    console.log('Second'); 
 
    console.log(dataArray); 
 
} 
 
window.onload = loadPosts;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Sie, dass die Reihenfolge der Ausführung sehen. Wenn Sie DataArray nach seiner Zuweisung behandeln müssen, müssen Sie im Erfolgsrückruf eine Funktion aufrufen und als Argument das neue dataArray übergeben.