Pourquoi cette fonction ne pas attendre jusqu'à ce qu'il a données de demande XHR?

Quand je l'appelle pour getCurrentConditions il essaie de retourner les données avant de les requestData a été complété et que, par conséquent, ne trouve pas de données.à l'heure actuelle. Je suis bien d'obtenir les données renvoyées par l'URL, j'ai essayé d'ajouter un délai d'attente de la boucle pour attendre le XHR à charger, mais qui vient de se casser le script tous ensemble. Je suis un peu confus pourquoi la deuxième fonction est de ne pas attendre pour cela.requestData(latitude, longitude); pour finir avant de continuer.

this.requestData = function(latitude, longitude) {
    request_url = self.API_ENDPOINT + api_key + '/' + latitude + ',' + longitude + '?units=auto';
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if(xhr.readyState==4 && xhr.status==200) {
            content = xhr.responseText;
            if(content != '' && (content)) {
                return JSON.parse(content);
            } else {
                return false;
            }
        }
    }
    xhr.open('GET', 'proxy.php?url='+request_url, true);
    xhr.send(null);
}
/**
 * Will return the current conditions
 *
 * @param float $latitude
 * @param float $longitude
 * @return \ForecastIOConditions|boolean
 */
this.getCurrentConditions = function(latitude, longitude) {
    data = this.requestData(latitude, longitude);
    if(data !== false) {
        return new ForecastIOConditions(data.currently);
    } else {
        return false;
    }
}



var forecast = new ForecastIO(api_key);
var condition = forecast.getCurrentConditions(latitude, longitude);

réplique exacte de la Comment faire pour retourner la réponse d'un appel AJAX?

OriginalL'auteur Ian Tearle | 2013-04-18

javascript

Parce que l'ajax est asynchrone, signifie que, une fois que la demande est envoyée, il va poursuivre l'exécution sans attendre la réponse.

Une solution simple est de désactiver la nature asynchrone en passant par le 3ème paramètre de la .open() méthode comme fausse, mais elle a des inconvénients comme le navigateur thread sera bloqué jusqu'à la demande est terminée moyen de l'INTERFACE utilisateur restera insensible jusqu'à la demande est terminée.

xhr.open('GET', 'proxy.php?url='+request_url, false);

La bonne solution est d'utiliser une méthode de rappel

this.requestData = function(latitude, longitude, callback) {
    request_url = self.API_ENDPOINT + api_key + '/' + latitude + ',' + longitude + '?units=auto';
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if(xhr.readyState==4 && xhr.status==200) {
            content = xhr.responseText;
            if(content != '' && (content)) {
                callback(JSON.parse(content));
            } else {
                callback(false);
            }
        }
    }
    xhr.open('GET', 'proxy.php?url='+request_url, true);
    xhr.send(null);
}
/**
 * Will return the current conditions
 *
 * @param float $latitude
 * @param float $longitude
 * @return \ForecastIOConditions|boolean
 */
this.getCurrentConditions = function(latitude, longitude, callback) {
    this.requestData(latitude, longitude, function(data) {
        if(data !== false) {
            callback(ForecastIOConditions(data.currently));
        } else {
            callback(false);
        }
    });
}



var forecast = new ForecastIO(api_key);
forecast.getCurrentConditions(latitude, longitude, function(condition){
    if(condition !== false) {

    } else {

    }
});

N'oubliez pas de mentionner la meilleure solution!
la mise à jour de rappel en fonction de la solution

OriginalL'auteur Arun P Johny

2

au lieu de
```
xhr.open('GET', 'proxy.php?url='+request_url, true);
```
utilisation
```
xhr.open('GET', 'proxy.php?url='+request_url, false);
```
Sur la méthode:
```
open(method,url,async)  
```
Spécifie le type de demande, l'URL, et si la demande doit être traitée de manière asynchrone ou pas.

method: le type de requête: GET ou POST

url: l'emplacement du fichier sur le serveur

async: vrai (asynchrone) ou faux (synchrone)

Source: w3schools

OriginalL'auteur NamingException

C'est asynch appel. Essayez d'utiliser la fonction de rappel.
Le Code ci-dessous est un exemple. Pas testé!

 this.requestData = function(latitude, longitude, callback) {
        request_url = self.API_ENDPOINT + api_key + '/' + latitude + ',' + longitude + '?units=auto';
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if(xhr.readyState==4 && xhr.status==200) {
                content = xhr.responseText;
                if(content != '' && (content)) {
                    callback(JSON.parse(content));
                } else {
                    return false;
                }
            }
        }
        xhr.open('GET', 'proxy.php?url='+request_url, true);
        xhr.send(null);
    }
    /**
     * Will return the current conditions
     *
     * @param float $latitude
     * @param float $longitude
     * @return \ForecastIOConditions|boolean
     */
    this.getCurrentConditions = function(latitude, longitude) {
        this.requestData(latitude, longitude, callback);        
    }

this.callback = function(data) {
if(data !== false) {
            return new ForecastIOConditions(data.currently);
        } else {
            return false;
        }
};

Oui, c'est non testé et manque de propager le rappel de style. Vous êtes toujours returning.

OriginalL'auteur Dmitry Volokh

1

mettre false au lieu de true ici
```
//`false` makes the request synchronous
xhr.open('GET', 'proxy.php?url='+request_url, false);
```
cette faire appel Synchrone au lieu de l'asynchrone. donc, quand l'appel à devenir Synchrone son attente pour l'appel ajax pour compléter et de l'exécuter la fonction que vous voulez.

Mozila lien pour XMLHttpRequest: Synchrone et asynchrone des requêtes

N'oubliez pas de vous contre-sjax!
Synchrone XMLHttpRequest sur le thread principal est déconseillée en raison de ses effets néfastes pour l'expérience de l'utilisateur final. Pour en savoir plus, consultez xhr.spec.whatwg.org.

OriginalL'auteur Pranay Rana

Vous devez vous connecter pour publier un commentaire.