我设置 ajax async: false 但不工作答案

【问题标题】：I set ajax async: false but not working我设置 ajax async: false 但不工作
【发布时间】：2014-02-13 17:13:34
【问题描述】：

我正在尝试从其他域获取 json，我的代码如下：

var token = '';
function getData(){
  console.log("get data suc");
  for (var i=0; i < urls.length; i++){
     var code = 'http://example.com/api/'+ urls[i];
     $.ajax({
       async: false,
       url: code,
       type: 'GET',
       dataType: 'jsonp',
       success: function(data) { showData(data); },
       error: function() { console.log('ajax Failed!'); },
       beforeSend: setHeader,
     });
  }
}
function showData(data){
  $("<tr></tr>").append("<td>" + data + "</td>")
    .appendTo("#results");
  console.log(data);
}
function setHeader(xhr) {
  xhr.setRequestHeader('Authorization', token);
}

这个结果应该显示为我从数组 urls 中给出的键的顺序。例如：urls = [1,2,3,4]→应该得到[一,二,三,四] 但我总是得到错误的顺序！（例如：[二、一、三、四]或[三、四、二、一]）发生了什么？那是“异步：假”不起作用吗？为什么？

【问题讨论】：

即使您的async: false 有效，这也是个坏主意。
了解how JSONP works 并意识到它永远不会同步。
请看stackoverflow.com/questions/14220321/…

标签： javascript jquery ajax jsonp

【解决方案1】：

您正在使用不支持async:false 的jsonp 请求。

默认情况下，所有请求都是异步发送的（即设置为默认情况下为真）。如果您需要同步请求，请将此选项设置为错误的。跨域请求和 dataType: "jsonp" 请求不支持同步操作。请注意，同步请求可能暂时锁定浏览器，在请求期间禁用任何操作处于活动状态。

所以试试

function getData() {
    function request(urls, i) {
        var code = 'http://example.com/api/' + urls[i];
        $.ajax({
            async: false,
            url: code,
            type: 'GET',
            dataType: 'jsonp',
            success: function (data) {
                showData(data);
            },
            error: function () {
                console.log('ajax Failed!');
            },
            beforeSend: setHeader,
        }).always(function () {
            i++;
            if (i < urls.length) {
                request(urls, i);
            }
        });
    }
    console.log("get data suc");
    request(urls, 0);
}

【讨论】：

【解决方案2】：

您的假设是正确的，async: false 不适用于 JSONP 请求。

如果您确实需要同步行为，则需要一系列请求，其中第一个成功回调启动第二个，依此类推。但实际上，如果您只是按照它们出现的顺序处理响应，那将是更好的选择。

例如，您可以传递索引变量：

function getCallback(i) {
   return function(data) {
      showData(data, i);
   };
};

...

$.ajax({
   ...
   success: getCallback(i)
 });

...

function showData(data, i){
   // use 'i' here to determine where to insert the record
}

【讨论】：