从AJAX onreadystatechange事件

时间:2015-08-25 14:15:33

标签: javascript ajax

将函数中的值返回到变量时遇到一些问题。它显然是“未定义的”。这显然是由于JavaScript的异步性造成的。但就我而言,我不知道如何用“回调”或“承诺”来规避它。请参阅下面的代码。我想将“value”中保存的汇率返回“rate”并在我的代码中进一步使用它。有什么想法吗?

var rate = rateCalc();
var currency = "EUR";
	
function rateCalc(){
	var value;
	if (currency != "EUR")	{
		var xmlhttp = new XMLHttpRequest();
		var rateURL = "http://query.yahooapis.com/v1/public/yql?q=select%20rate%2Cname%20from%20csv%20where%20url%3D'http%3A%2F%2Fdownload.finance.yahoo.com%2Fd%2Fquotes%3Fs%3D"+"EUR"+"HKD"+"%253DX%26f%3Dl1n'%20and%20columns%3D'rate%2Cname'&format=json";
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				var json = JSON.parse(xmlhttp.responseText);
				value = json.query.results.row.rate;
				alert("At this position the value is defined: "+ value);
				return value;
			}
		}
	xmlhttp.open("GET", rateURL, true);
	xmlhttp.send();
	}
	
	else {
		value = 1;
		return value;
	}
}
alert("The return statement somehow didn't work: "+ rate);

顺便说一下,我是新手。很抱歉,如果此问题已经被问过一百万次了。

由于 勒

3 个答案:

答案 0 :(得分:1)

您无法从JS中的异步函数返回任何内容。因此,创建一个新函数并将其用作回调函数。请参阅以下示例。

    var rate = rateCalc();
    var currency = "EUR";

    function rateCalc(){
        var value;
        if (currency != "EUR")  {
            var xmlhttp = new XMLHttpRequest();
            var rateURL = "http://query.yahooapis.com/v1/public/yql?q=select%20rate%2Cname%20from%20csv%20where%20url%3D'http%3A%2F%2Fdownload.finance.yahoo.com%2Fd%2Fquotes%3Fs%3D"+"EUR"+"HKD"+"%253DX%26f%3Dl1n'%20and%20columns%3D'rate%2Cname'&format=json";
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var json = JSON.parse(xmlhttp.responseText);
                    value = json.query.results.row.rate;
                    alert("At this position the value is defined: "+ value);
                    valueCallBack(value); //Callback function

                }
            }
        xmlhttp.open("GET", rateURL, true);
        xmlhttp.send();
        }

        else {
            value = 1;
            return value;
        }
    }

   function valueCallBack(value){

     console.log("value is " + value);      
   } 

更新:您可以使用ES6中引入的Promise API或使用JQUERY延迟对象。

答案 1 :(得分:0)

xmlhttp.send()不应为空。试试这个。我希望它能完成这项工作!

xmlhttp.send(null);

答案 2 :(得分:0)

您可以将响应值发送给另一个函数,这样当您有一个值时,它将显示而不会被定义。

试试这个:

rateCalc();
var currency = "EUR";

function rateCalc() {
    var value;

    if (currency != "EUR")  {
        var xmlhttp = new XMLHttpRequest();
        var rateURL = "http://query.yahooapis.com/v1/public/yql?q=select%20rate%2Cname%20from%20csv%20where%20url%3D'http%3A%2F%2Fdownload.finance.yahoo.com%2Fd%2Fquotes%3Fs%3D"+"EUR"+"HKD"+"%253DX%26f%3Dl1n'%20and%20columns%3D'rate%2Cname'&format=json";

        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var json = JSON.parse(xmlhttp.responseText);
                value = json.query.results.row.rate;
                show(value);
            }
        };

        xmlhttp.open("GET", rateURL, true);
        xmlhttp.send();
    } else {
        value = 1;
        show(value);
    }
}

function show(rate) {
    alert("Value: "+ rate);
}
相关问题