Rendi la funzione "get" AJAX sincrona/come ottenere il risultato?

Question

Ho riscontrato un problema con la funzione $ .get. L'URL contiene JSON

il mio codice:

xyz = null 

    $.get('http://www.someurl.com/123=json', function(data) { 
     var xyz = data.positions[0].latitude; 
    }); 

alert(xyz); 
//some more code using xyz variable 

So che xyz avviserà un risultato nullo perché l'$.get è asincrono.

Quindi è possibile utilizzare lo xyz all'esterno di questa funzione?

Answer 1

la vera risposta è NO , ma è possibile utilizzare questo:

function useXYZ(){ 
    alert(xyz); 
} 

xyz = null   

$.get('http://www.someurl.com/123=json', function(data) { 
    xyz = data.positions[0].latitude; 
    useXYZ(); 
}); 

Answer 2

get è una scorciatoia. Si può fare lo stesso, ma sincrono, utilizzando:

var xyz = null 


$.ajax({ url: 'http://www.someurl.com/123=json', 
     async: false, 
     dataType: 'json', 
     success: function(data) { 
       xyz = data.positions[0].latitude; 
      } 
     }); 


alert(xyz); 

Dovrai dichiarare la variabile xyz prima della chiamata ajax, però.

Answer 3

Questo è un problema comune con Javascript. Il codice Javascript deve essere scritto in stile passaggio continuo. È fastidioso ma è qualcosa che puoi convertire senza pensare troppo.

Basicaly, ogni volta che avremmo qualcosa come

var x = someSyncFunction(a, b, c); 
//do something with x 
console.log(x); 

possiamo convertirlo in codice asincrono per rendere tutto il codice dopo la funzione restituisce in una funzione continuazione e girando x da una variabile in un parametro del callback di continuazione.

someAsyncFunction(a, b, c, function(x){ 
    //do something with x; 
    console.log(x); 
}); 

Devi fare attenzione che è molto facile scrivere codice confuso. Un buon trucco da tenere a mente è che puoi far sì che le tue funzioni ricevano anche i callback. Questo permette loro di essere utilizzati da diverse funzioni (proprio come le normali funzioni di sincronizzazione di supporto che restituisce un valore può essere utilizzato da diverse funzioni)

var getXyz = function(onResult){ //async functions that return do so via callbacks 
           //you can also another callback for errors (kind of analogous to throw) 
    $.get('http://www.someurl.com/123=json', function(data) { 
     var xyz = data.positions[0].latitude; 
     onResult(xyz); //instead of writing "return xyz", we pass x to the callback explicitely. 
    }); 
}; 

getXyz(function(xyz){ //this would look like "var xyz = getXyz();" if it were sync code instead. 
    console.log('got xyz'); 
}); 

Il trucco è quello di cambiare tutte le dichiarazioni di ritorno dalla funzione in chiamate al funzione di callback. Pensa come se la funzione asincrona non fosse mai ritornata e l'unico modo per restituire un valore a qualcuno è di passare quel valore a un callback.

---

Si potrebbe chiedere perché non c'è un modo più semplice per fare tutto questo. Beh, non c'è, a meno che non usi un'altra lingua invece di Javascript (o almeno qualcosa che ti permetta di scrivere codice asincrono in stile sincrono ma compili automaticamente in Javascript)