javascript - AJAX onreadystatechange 事件的返回值

Question

我在将函数的值返回到变量时遇到一些问题。它显然是“未定义的”。这显然是由于 JavaScript 的异步性造成的。但就我而言，我不知道如何通过“回调”或“ promise ”来规避它。请参阅下面的代码。我想将“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);

顺便说一句，我是新手。很抱歉，如果这个问题之前已经被问过一百万次了。

谢谢雷内

Answer 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 延迟对象。