Question

我已多次阅读此stackoverflow帖子How do I return the response from an asynchronous call?。出于某种原因，我只是不明白。有人可以在这里将问题中的示例作为一个实际的完整工作解决方案发布，而不是在帖子“2.重组代码”中提供的逐步指导，我发现这个问题非常令人困惑。

function foo() {
    var result;

    $.ajax({
        url: '...',
        success: function(response) {
            result = response;
            // return response; // <- tried that one as well
        }
    });

    return result;
}

var result = foo(); // always ends up being `undefined`.

Answer 1

success函数是回调，这意味着它可以随时调用。在这种情况下，在 ajax调用之后调用，并且在 ajax调用之前调用{em>}，这意味着return result;未被分配在返回之前，这就是为什么它总是未定义的。

我喜欢解决此问题的一种方法是将我自己的回调传递给result函数，然后在收到数据时调用它，如下所示：

foo

Answer 2

就目前而言，您几乎立即从result返回foo。调用$.ajax()，函数会立即移至return result，此时为undefined;最后，当ajax调用完成后，你设置result = response，但该函数早已完成（即return result再也不会发生）。

这就是异步调用通常与回调或承诺一起使用的原因。这些是您在异步调用完成后完成工作的地方。在您的示例中，您可以使用promises，例如：

function foo() { return $.ajax({ url: '...' }); }

然后称之为：

var result; foo().done(function(response) { result = response; });

或者，您可以使用回调来执行此操作，例如：

function foo(callback) { return $.ajax({ url: '...', success: callback }); }

并称之为：

var result; foo(function(response) { result = response; });

Answer 3

由于ajax请求是异步完成的，浏览器将继续执行代码，并且只有在请求完成（并且成功）时才会返回到您的回调（在success:下）。

这意味着如果您的代码依赖于请求的响应，则必须将其封装在回调中，以确保它不会事先执行。

$.ajax({
    url : '...',
    success : foo
});

function foo(response) {
    console.log('This executes AFTER the request finished');
    // do your thing with the response
}

console.log('This executes BEFORE the request finished');

从异步调用示例返回响应

3 个答案: