JavaScript ajax 函数设置为 Synchronus - 返回空对象

Question

我做了一些研究，但找不到适合这种情况的例子。这是我的 JavaScript 代码:

function obtainChartData(chart) {
    "use strict";
    $.ajax({
        url: 'server/ExtractTelemetry.php',
        type: "POST",
        async: false,
        data: JSON.stringify(chart),
        success: function (data) {
            var x = jQuery.parseJSON(data);
            alert(typeof x); //SHOWS AS "object"
            return x;
        }
    });
}

然后这个函数接收它:

$("#loadChart").click(function () {
    ...
    data = obtainChartData(newChart);
    alert(typeof data); //SHOWS AS "undefined"
    ...
});

如果ajax调用设置为异步，那么我会理解为什么会发生这种情况，但在这种情况下，“数据”直到函数返回才被分配。那么为什么它显示为未定义呢？

Answer 1

不存在同步 AJAX 调用(AJAX 代表“异步 JavaScript 和 XML”)。

jQuery 会忽略 success 函数的返回值。

您刚刚发现了每个使用 javascript 的人都会遇到的非常基本的问题——应用程序中的某个地方会有异步代码(例如 AJAX 代码)，并且您必须使所有使用此函数的代码也异步。

自从这个问题出现以来，人们有很多想法，例如Promises 和新的 ES6 await/async 关键字。为了简单起见，现在您可以将回调传递给 obtainChartData 并让它处理结果:

function obtainChartData(chart, callback) {
    "use strict";
    $.ajax({
        url: 'server/ExtractTelemetry.php',
        type: "POST",
        async: false,
        data: JSON.stringify(chart),
        success: function (data) {
            var x = jQuery.parseJSON(data);
            alert(typeof x); //SHOWS AS "object"
            callback(x); // instead of return!
        }
    });
}

$("#loadChart").click(function () {
    ...
    obtainChartData(newChart, function (data) {
        alert(typeof data);
    });
    ...
});