javascript - jQuery AJAX get请求无法正常工作且返回值无法在控制台显示

Question

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



<pre><code>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
}
</code></pre>

<p>This is the normal XMLHttpRequest() that I used. The problem is, that if I want to say for example </p>

<pre><code>x = getNormal_XHR_Request()
</code></pre>

<p>so that I would have the JSON file in my x variable, it doesn't work and it returns undefined.</p>

<p>And the exact same things happens with <code>$.ajax({...})</code></p>



class XHR_REQUEST{
    constructor(path){
        this.path = path;
    }
    getRequest_XHR(requestHeaders){
        this.requestHeaders = requestHeaders;

        var self = this;
        let returnValue = [];

        $.ajax({
            url : self.path,
            dataType : "json",
            headers : self.requestHeaders, 
        })
        .done((data) => {
            returnValue = data;
        })
        .fail((jqXHR, errorMessage, error) => {
            console.log(jqXHR);
            console.log(errorMessage);
            console.log(error);
        });

        return returnValue;
    }
};

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

Answer 1

您在两个示例中得到的结果是完全正常的。您获得未定义值的原因是两个请求都是异步发生。返回某些内容或对获得的结果采取某些操作的正确位置是:

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

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

这些是对结果采取适当行动的正确位置。您必须改变心态才能开始使用异步回调的响应。

问题在于，即使在回调将某些值填充到变量之前，您也正在返回结果。

现在出现了一些新的结构，可以使异步调用与 async-await 结构同步运行。但除此之外，我认为您必须修改或调整您的代码，以使其能够正常工作的方式对异步结果使用react。