Ajax调用的返回值问题

Question

我在进行ajax调用时遇到问题，我认为返回值未正确返回。

我有一个index.html页面，其中加载了2个javascript文件：

• index.js：用于index.html上的动态GUI内容
• application.js：进行ajax调用（使用Javascript模块模式）

index.js

$(document).ready(function() {
    console.log(ApplicationModule.getEventById(123));  // undefined if I use return result[0];
})

application.js

var ApplicationModule = (function () {
    // return "foo"; this works in index.html ("foo")
    function getEventById(id) {
        // ajax call returns a json object (list of {"title":"<the title>"} objects)
        $.ajax({
            type: "GET",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: true,
            cache: false,
            url: "/api/v1/eventtool/" + id,
            success: function (result) {
                console.log(result[0]);  // works fine -> {"title":"my title"}
                return result[0];  // does not work in index.html (undefined)
            }
        });
    }

    return {
        getEventById : getEventById
    };

})(ApplicationModule || {});

如果我取消注释行[return“ foo”]，则一切正常，并且在控制台上看到“ foo”。 如果我注释此行以执行ajax调用，则会得到“未定义”。为什么？

我的ajax调用有问题吗？

Answer 1

返回值不起作用，您应该使用DOM指定一个元素，例如：$("#el").html(result[0]);

Answer 2

使用fetch和promises的最终解决方案：

application.js

function getEventById(id) {
    return fetch(myurl)
        .then(function(response) {
            return response.json();
        })
        .then(function(myJson) {                
            return myJson[0];
        });
}

index.html

const check_event = ApplicationModule.getEventById(123);
// console.log(check_event); // Promise {<pending>}
// [[PromiseStatus]] "resolved"
// [[PromiseValue]]  {"title":"my title"}
check_event.then(function(data) {
    console.log(JSON.stringify(data)); // {"title":"my title"}
});