Question

当我调用getCurrentConditions时，它会尝试在requestData完成之前返回数据，因此找不到data.currently。我肯定是从URL返回数据，我已经尝试添加一个等待XHR加载的超时循环，但这只是一起打破了脚本。我有点困惑为什么第二个函数没有等待this.requestData（纬度，经度）;在继续之前完成。

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);

Answer 1

因为ajax是异步的，所以意味着一旦发送请求，它将继续执行而不等待响应。

一个简单的解决方案是通过将第3个参数传递给.open()方法来关闭异步性质，但它有一些缺点，例如浏览器线程将被阻塞，直到请求完成意味着UI将保持无响应直到请求完成。

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

正确的解决方案是使用回调方法

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 {

    }
});

Answer 2

而不是

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

使用

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

关于方法：

open(method,url,async)

指定请求的类型，URL以及是否应异步处理请求。

method:请求的类型：GET或POST

url:文件在服务器上的位置

async: true（异步）或false（同步）

资料来源：w3schools

Answer 3

在这里放置false而不是true

// `false` makes the request synchronous
xhr.open('GET', 'proxy.php?url='+request_url, false);

这使得调用同步而不是同步。所以当call成为Synchronous时，它等待ajax调用完成，然后执行你想要的函数。

XMLHttpRequest的Mozila链接：Synchronous and asynchronous requests

Answer 4

这是异步电话。尝试使用回调函数。下面的代码是一个示例。未经测试！

 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;
        }
};

为什么此功能在XHR请求中有数据之前不会等待？

4 个答案: