如何使用 $.getJSON 编写异步代码？答案

【问题标题】：How to write async with $.getJSON?如何使用 $.getJSON 编写异步代码？
【发布时间】：2013-02-09 12:50:52
【问题描述】：

我正在做这样的事情

$.getJSON(url1, function(response1){
if(response1.status == 'success'){
    $.getJSON(url2, function(response2){
        if(response2.status == 'success') {
            $.getJSON(url3, function(response3){
                if(response3.status == 'success') {
                    //final code here
                }
            });
        }
    });
}
});

我听说过像 https://github.com/caolan/async#series 这样的异步库在这种情况下如何实现？

【问题讨论】：

你没有实现它！你按照自己的方式来做，如果你想让它看起来更干净，你可以使用 deferreds 和 promises 来做同样的事情。
您拥有的代码已经是异步的，如果您想要像@adeneo 建议的那样更简洁的代码，您可以使用differed/promise api。如果你想测试异步特性，你可以在$.getJson()调用之后添加console.log('after post')，在if(response2.status == 'success')语句之前添加console.log('after callback')
如上建议使用 jQuery Deferreds，请查看api.jquery.com/jQuery.when

标签： javascript jquery async.js

【解决方案1】：

您的代码已经在使用异步处理模型。因此，您不必使用任何其他库来使其异步。

$.getJson 是一种实用方法，它使用$.ajax 从服务器发送和接收数据。 $.ajax 使用 XmlHttpRequest 发送/接收使用异步处理模型构建的数据。

如果你想测试异步特性，你可以在 $.getJson() 调用之后添加一个 console.log('after post')，在 if(response2.status = = '成功') 语句。

如果您在发送请求后检查控制台，您会发现after post 出现在after callback 之前，这意味着脚本继续执行，无需等待服务器的响应。

【讨论】：

【解决方案2】：

您真的要进行同步调用（阻止浏览器直到完成）还是只是在另一个完成后以“更清洁”的方式启动一个getJSON（不将其嵌套在回调中）？正如其他人已经指出的那样，ajax 调用已经相互同步。

对于第一个选项，查看更通用的$.ajax（您可以在参数中将async 设置为false）。第二，你可以只创建一个递归效用函数：

function chain(list,index,callback,errorCallback) {
    if ( index == list.length )
        return callback();
    $.getJSON(list[index])
        .done(function() {
            chain(list,index+1,callback);
        })
        .fail(errorCallback);
}
chain([url1, url2, url3],0,function() {
    //final code here
},function() {
    //error handling here (in any of the calls)
});

【讨论】：