jQuery AJAX 获取请求无法正常工作，返回值无法在控制台显示

Posted 2023-05-07

【中文标题】jQuery AJAX 获取请求无法正常工作，返回值无法在控制台显示

【英文标题】：jQuery AJAX get request doesn't work normally and the return value can't be displayed in the console

【发布时间】：2020-05-14 07:18:27

【问题描述】：

我是 jQuery 新手，我正在尝试使用 AJAX 构建一些东西。我尝试使用普通的基本 XMLHttpRequest 类，然后使用$.ajax(...) but none of them work.

function getNormal_XHR_Request()
    let request = new XMLHttpRequest();

    // I also tried to make a variable here, assign it to the request.response and return it in the end
    let returnValue = null;

    request.addEventListener(
        "load",
        (event) => 
            if(request.readyState === 4 && request.status === 200)
                console.log(request); // this will work
                console.log(request.response); // this will work too
                // Assign the returnValue to the request.response
                returnValue = JSON.parse(request.response); // JSON.parse(request.response) doesn't return undefined, it returns my object that I want to use, but even if I equal the returnValue to it, it will still return undefined
                return JSON.parse(request.response);
            
        ,
        false // dispatch event in the bubbling phase not in the capturing phase
    )

    request.open("GET", "scripts/users.json");
    request.setRequestHeader("Accept", "text/json");
    request.send();

    return returnValue

这是我使用的普通 XMLHttpRequest()。问题是，如果我想说例如

x = getNormal_XHR_Request()

所以我的 x 变量中有 JSON 文件，它不起作用并且返回未定义。

$.ajax(...) 也会发生完全相同的事情

类 XHR_REQUEST
    构造函数（路径）
        this.path = 路径；
    
    getRequest_XHR(requestHeaders)
        this.requestHeaders = requestHeaders;

        变种自我=这个；
        让返回值 = [];

        $.ajax(
            网址：self.path，
            数据类型：“json”，
            标头：self.requestHeaders，
        )
        .done((数据) => 
            返回值 = 数据；
        )
        .fail((jqXHR, errorMessage, 错误) => 
            控制台.log(jqXHR);
            控制台.log(errorMessage);
            控制台日志（错误）；
        );

        返回返回值；
    
;

它的工作原理与我上面使用的普通函数相同，我所做的一切都返回未定义，即使 request.response 给了我正确的答案。如果我尝试 console.log(request.response)，我会得到对象，如果我尝试返回它并 console.log() 结果，它会给我返回 undefined。 为什么？

【问题讨论】：

requestHeaders 长什么样子？

"接受："text/json"，"Content-Type"："application/json"

问题是你愿意从异步调用中返回一个值。那里的 returnValue 总是会出现 emtpy。

是的，但是为什么它在 request.readyState 为 4 之后返回 undefined ，所以它已加载并且状态为 200 所以它是“OK”，我认为这不再有意义了，因为请求已加载并且一切正常，所以我在所有内容加载后返回。如果我打印它，它会给我正确的答案，否则，如果我尝试返回它，它会给我未定义的。那么，如果我只是在加载后返回值，而不使用其他变量，为什么它在加载后仍然返回 undefined ？

@DavidGugea 那是因为所有这些都是异步发生的，大卫。在下面检查我的答案。

【参考方案1】：

你在这两个例子中得到的结果是完全正常的。您获得undefined 值的原因是因为这两个请求都是异步发生的。返回某些内容或对您获得的结果采取某些行动的正确位置是：

1) request.addEventListener('load', event => .... 在此处的事件中，您可以对成功响应执行操作。

2) 使用 $.ajax() 调用，您可以在 done() 承诺处理程序中执行此操作。

这些是对结果采取适当措施的正确位置。您必须调整心态才能开始使用来自异步回调的响应。

问题是你正在返回结果，甚至在回调函数中填充了一些值之前。

现在有一些新的结构可以使异步调用与async-await 结构同步。但除此之外，我认为您必须修改或调整您的代码才能以一种有效的方式对异步结果做出反应。

【讨论】：

是的，你是对的，马克。谢谢您的帮助。我明白了。