如何将"jQuery.get"的值存储到全局变量中？

14 浏览
0 Comments

如何将"jQuery.get"的值存储到全局变量中？

如何从进行异步请求的函数foo中返回响应/结果？

我试过从回调函数中返回值，同时将结果赋值给函数内部的一个局部变量并返回该变量，但这些方式都没有返回响应 - 它们都返回undefined或变量result的初始值。

一个接受回调函数的异步函数的示例（使用jQuery的ajax函数）：

function foo() {
    var result;
    $.ajax({
        url: '...',
        success: function(response) {
            result = response;
            // return response; // <- 我也试过这个
        }
    });
    return result; // 它总是返回`undefined`
}

使用Node.js的示例：

function foo() {
    var result;
    fs.readFile("path/to/file", function(err, data) {
        result = data;
        // return data; // <- 我也试过这个
    });
    return result; // 它总是返回`undefined`
}

使用promise的then块的示例：

function foo() {
    var result;
    fetch(url).then(function(response) {
        result = response;
        // return response; // <- 我也试过这个
    });
    return result; // 它总是返回`undefined`
}

0

2 答案

0 Comments

问题的原因是在使用jQuery的AJAX请求中，由于请求是异步的，所以在请求发送后，回调函数尚未执行，导致返回的值为undefined。解决方法有两种，一种是将AJAX请求改为同步请求，但这是不推荐的做法，因为会冻结用户的浏览器，并导致糟糕的用户体验。另一种是重构代码，使用回调函数来处理异步请求的返回值。具体的解决方法如下：

1. 同步AJAX请求（不推荐）：可以通过设置XMLHttpRequest对象的open方法的第三个参数为false来实现同步请求。但这种方式会阻塞代码的执行，会导致严重的性能问题和用户体验问题。

2. 重构代码：将函数改为接受一个回调函数作为参数。在示例代码中，可以将函数foo改为接受一个回调函数作为参数。我们告诉代码在foo完成时如何反应。

具体的代码如下：

function foo(callback) {
    var httpRequest = new XMLHttpRequest();
    httpRequest.onload = function(){
       callback(httpRequest.responseText);
    };
    httpRequest.open('GET', "/echo/json");
    httpRequest.send();
}
foo(function(result) {
    // Code that depends on `result`
});

我们将foo函数修改为接受一个在AJAX请求成功后执行的动作。可以进一步扩展该函数，通过检查响应状态是否为200来处理请求失败的情况。

如果还有难以理解的地方，可以参考MDN上的AJAX入门指南。

“同步请求阻塞代码的执行，可能会导致内存泄漏和事件泄漏”这句话是在强调同步请求的不推荐使用，并不是指同步请求会导致内存泄漏。

0
0 Comments

在这篇文章中，作者首先介绍了一个简单的XMLHttpRequest 2函数，用于在现代浏览器和移动浏览器中进行Ajax调用。然后作者展示了两种获取Ajax响应的方法，分别是使用this.response和使用e.target.response。接下来，作者提供了一个扩展的函数，用于处理POST请求和FormData。作者还介绍了错误处理的方法，并提到了同步请求的问题。最后，作者讨论了如何扩展这些函数以及如何在AJAX调用中返回响应的问题。

在问题的解决方案中，作者指出使用错误处理函数可以解决错误的处理问题。还有一个同步加载文件的函数，但强调不建议使用这种方法。最后，作者强调了在处理不同的请求时，应该根据需求创建相应的函数。

这篇文章介绍了如何使用XMLHttpRequest 2进行Ajax调用，以及如何处理响应和错误。文章还提供了一些扩展的函数和注意事项。

0