具有与完成回调相同的 jsonpCallback 的多个 Ajax答案

【问题标题】：multiple Ajax with same jsonpCallback as done callback具有与完成回调相同的 jsonpCallback 的多个 Ajax
【发布时间】：2016-09-02 22:57:21
【问题描述】：

我在 URL 中使用 不同的路径和查询对同一个 API 进行了不同的 Ajax 调用，但是使用 相同的 jsonpCallback 我无法更改

当我调用一个 Ajax url 时 - 一切都很好！

但是当我需要得到多个响应时，我得到了错误，导致它们立即执行。我尝试了回调，我尝试了“async：false”，我尝试了“使用 when,then,done 等返回 ajax - 没有像我预期的那样工作:(

function timenow() {
  var a = new Date,
    b = a.getMinutes();
  b < 10 && (b = "0" + b);
  var c = a.getHours();
  c > 12 && (c -= 12);
  var d = c + ":" + b;
  return d
}

function ajaxCall(p, callback) {
  if (p == 1) {
    url = 'https://api.vk.com/method/wall.get?owner_id=-93100300&offset=0&count=1&filter=owner&callback=logResults'
  } else {
    url = "https://api.github.com/users/jeresig?callback=logResults"
  }
  return $.ajax({
    url: url,
    dataType: "jsonp",
    jsonp: false,
    jsonpCallback: "logResults",
    cache: true,
  }).done(function(r) {
    callback(r);
  });
}

$.when(
  ajaxCall(0, function(r) {
    console.log(r);
    console.log(r.data.avatar_url + ' ' + timenow());
  }),
  ajaxCall(1, function(r) {
    console.log(r);
    console.log(r.response[1].id + ' ' + timenow());
  }),
  ajaxCall(0, function(r) {
    console.log(r.data.bio + ' ' + timenow());
  }),
  ajaxCall(1, function(r) {
    console.log(r.response[1].id + ' ' + timenow());
  }),
  ajaxCall(0, function(r) {
    console.log(r.data.blog + ' ' + timenow());
  }),
  ajaxCall(1, function(r) {
    console.log(r.response[1].from_id + ' ' + timenow());
  }),
  ajaxCall(0, function(r) {
    console.log(r.data.company + ' ' + timenow());
  }),
  ajaxCall(1, function(r) {
    console.log(r.response[1].to_id + ' ' + timenow());
  }),
  ajaxCall(0, function(r) {
    console.log(r.data.created_at + ' ' + timenow());
  }),
  ajaxCall(1, function(r) {
    console.log(r.response[1].date + ' ' + timenow());
  }),
  ajaxCall(0, function(r) {
    console.log(r.data.email + ' ' + timenow());
  }),
  ajaxCall(1, function(r) {
    console.log(r.response[1].post_type + ' ' + timenow());
  }),
  ajaxCall(0, function(r) {
    console.log(r.data.events_url + ' ' + timenow());
  }),
  ajaxCall(1, function(r) {
    console.log(r.response[1].text + ' ' + timenow());
  }),
  ajaxCall(0, function(r) {
    console.log(r.data.followers + ' ' + timenow());
  }),
  ajaxCall(1, function(r) {
    console.log(r.response[1].is_pinned + ' ' + timenow());
  }),
  ajaxCall(0, function(r) {
    console.log(r.data.followers_url + ' ' + timenow());
  }),
  ajaxCall(1, function(r) {
    console.log(r.response[1].reposts.count + ' ' + timenow());
  }),
  ajaxCall(0, function(r) {
    console.log(r.data.following + ' ' + timenow());
  }),
  ajaxCall(1, function(r) {
    console.log(r.response[1].likes.count + ' ' + timenow());
  }),
  ajaxCall(0, function(r) {
    console.log(r.data.following_url + ' ' + timenow());
  }),
  ajaxCall(1, function(r) {
    console.log(r.response[1].comments.count + ' ' + timenow());
  }),
  ajaxCall(0, function(r) {
    console.log(r.data.gists_url + ' ' + timenow());
  })
).done(console.log('Ajaxing done ' + timenow()));

我认为同一个 jsonpCallback 有问题，所以当我在 ajax 中使用回调时，它总是用新函数重写它，所以我收到错误。

附：仍然无法将异步设置为 false，工作示例 https://jsfiddle.net/ypmkn5k0/

<div id="log"></div>

<script>
$.ajaxSetup({ async: false});


$.ajax({
  url: 'https://api.github.com/users/jeresig?callback=logResults',
  dataType: "jsonp",
  jsonp: false,
  jsonpCallback: "logResults",
  cache: true,
  async: false,
}).done(function(r) {
  $('#log').append(r.data.avatar_url+'</br>');
});

$('#log').append('Ajaxing done </br>');
</script>

P.S.S 哦，我再次检查了文档，现在我明白了，非常伤心（（（

跨域请求和dataType：“jsonp”请求不支持同步操作。

P.S.S.S 我最后一次尝试回调，它的工作原理，FUK-FUK-FUK，不知道为什么它不在真实项目中，但我会尝试实现它：

function timenow(){var a=new Date,b=a.getMinutes();b<10&&(b="0"+b);var c=a.getHours();c>12&&(c-=12);var d=c+":"+b;return d}

        function ajaxCall(p,callback) {
        if(p==1){ 
        url='https://api.vk.com/method/wall.get?owner_id=-93100300&offset=0&count=1&filter=owner&callback=logResults' 
        } else {
        url="https://api.github.com/users/jeresig?callback=logResults" 
        }
        $.ajax({
        url: url,
        dataType: "jsonp",
        jsonp: false, 
        jsonpCallback: "logResults",
        cache: true,
        success: function (r) {
        callback(r);
        },
        });
        }


        ajaxCall(0,function(r){console.log(r); console.log(r.data.avatar_url+' '+timenow());
        ajaxCall(1,function(r){console.log(r); console.log(r.response[1].id+' '+timenow());
        ajaxCall(0,function(r){console.log(r.data.bio+' '+timenow());
        ajaxCall(1,function(r){console.log(r.response[1].id+' '+timenow());
        ajaxCall(0,function(r){console.log(r.data.blog+' '+timenow());
        ajaxCall(1,function(r){console.log(r.response[1].from_id+' '+timenow());
        ajaxCall(0,function(r){console.log(r.data.company+' '+timenow());
        ajaxCall(1,function(r){console.log(r.response[1].to_id+' '+timenow());
        ajaxCall(0,function(r){console.log(r.data.created_at+' '+timenow());
        ajaxCall(1,function(r){console.log(r.response[1].date+' '+timenow());   
        ajaxCall(0,function(r){console.log(r.data.email+' '+timenow());
        ajaxCall(1,function(r){console.log(r.response[1].post_type+' '+timenow());
        ajaxCall(0,function(r){console.log(r.data.events_url+' '+timenow());
        ajaxCall(1,function(r){console.log(r.response[1].text+' '+timenow());
        ajaxCall(0,function(r){console.log(r.data.followers+' '+timenow());
        ajaxCall(1,function(r){console.log(r.response[1].is_pinned+' '+timenow());
        ajaxCall(0,function(r){console.log(r.data.followers_url+' '+timenow());
        ajaxCall(1,function(r){console.log(r.response[1].reposts.count+' '+timenow());
        ajaxCall(0,function(r){console.log(r.data.following+' '+timenow());
        ajaxCall(1,function(r){console.log(r.response[1].likes.count+' '+timenow());
        ajaxCall(0,function(r){console.log(r.data.following_url+' '+timenow());
        ajaxCall(1,function(r){console.log(r.response[1].comments.count+' '+timenow());
        ajaxCall(0,function(r){console.log(r.data.gists_url+' '+timenow());
            console.log('Ajaxing done '+timenow());
        });
        });
        });
        });
        });
        });
        });
        });
        });
        });
        });
        });
        });
        });
        });
        });
        });
        });
        }); 
        });             
        });
        });
        });

【问题讨论】：

它们不能同时执行，因为 Javascript 是单线程的。
logResults的定义在哪里？
能否请您附上您得到的错误信息？ AJAX 的重点是异步性，您可以忽略上面的注释，因为一旦启动 ajax 通信，其余功能将继续。
我知道它是异步的，我现在看到的唯一解决方案是使用后端代理和默认的随机 Jquery 回调:(((((
你有两个不变的、硬编码的 URL，因此用机枪式的方式一遍又一遍地用完全相同的两个请求重击两台服务器。为什么不只每个服务器发出一个请求，然后注销各种响应属性en bloc？修复它，然后担心它为什么不起作用；

标签： javascript jquery ajax jquery-deferred

【解决方案1】：

我看到的主要问题是在最后的 .done() 中。这应该包含在一个函数中。那我认为如果你声明你的'url'变量会更好，这样就不会混淆它的本地化。

function timenow() {
  var a = new Date,
    b = a.getMinutes();
  b < 10 && (b = "0" + b);
  var c = a.getHours();
  c > 12 && (c -= 12);
  var d = c + ":" + b;
  return d
}

function ajaxCall(p, callback) {
  var url = 'https://api.github.com/users/jeresig?callback=logResults';
  if (p == 1) {
    url = 'https://api.vk.com/method/wall.get?owner_id=-93100300&offset=0&count=1&filter=owner&callback=logResults'
  }
  return $.ajax({
    url: url,
    dataType: "jsonp",
    jsonp: false,
    jsonpCallback: "logResults",
    cache: true,
  }).done(function(r) {
    callback(r);
  });
}

$.when(
  ajaxCall(0, function(r) {
    console.log(r);
    console.log(r.data.avatar_url + ' ' + timenow());
  }),
  ajaxCall(1, function(r) {
    console.log(r);
    console.log(r.response[1].id + ' ' + timenow());
  }),
  ajaxCall(0, function(r) {
    console.log(r.data.bio + ' ' + timenow());
  }),
  ajaxCall(1, function(r) {
    console.log(r.response[1].id + ' ' + timenow());
  }),
  ajaxCall(0, function(r) {
    console.log(r.data.blog + ' ' + timenow());
  }),
  ajaxCall(1, function(r) {
    console.log(r.response[1].from_id + ' ' + timenow());
  }),
  ajaxCall(0, function(r) {
    console.log(r.data.company + ' ' + timenow());
  }),
  ajaxCall(1, function(r) {
    console.log(r.response[1].to_id + ' ' + timenow());
  }),
  ajaxCall(0, function(r) {
    console.log(r.data.created_at + ' ' + timenow());
  }),
  ajaxCall(1, function(r) {
    console.log(r.response[1].date + ' ' + timenow());
  }),
  ajaxCall(0, function(r) {
    console.log(r.data.email + ' ' + timenow());
  }),
  ajaxCall(1, function(r) {
    console.log(r.response[1].post_type + ' ' + timenow());
  }),
  ajaxCall(0, function(r) {
    console.log(r.data.events_url + ' ' + timenow());
  }),
  ajaxCall(1, function(r) {
    console.log(r.response[1].text + ' ' + timenow());
  }),
  ajaxCall(0, function(r) {
    console.log(r.data.followers + ' ' + timenow());
  }),
  ajaxCall(1, function(r) {
    console.log(r.response[1].is_pinned + ' ' + timenow());
  }),
  ajaxCall(0, function(r) {
    console.log(r.data.followers_url + ' ' + timenow());
  }),
  ajaxCall(1, function(r) {
    console.log(r.response[1].reposts.count + ' ' + timenow());
  }),
  ajaxCall(0, function(r) {
    console.log(r.data.following + ' ' + timenow());
  }),
  ajaxCall(1, function(r) {
    console.log(r.response[1].likes.count + ' ' + timenow());
  }),
  ajaxCall(0, function(r) {
    console.log(r.data.following_url + ' ' + timenow());
  }),
  ajaxCall(1, function(r) {
    console.log(r.response[1].comments.count + ' ' + timenow());
  }),
  ajaxCall(0, function(r) {
    console.log(r.data.gists_url + ' ' + timenow());
  })
).done(function() { console.log('Ajaxing done ' + timenow()); });

如果您要使用 async: false 参数，那么将所有这些都包含在 .when/.done 中是没有意义的，并且如果您知道不能异步调用它们，那么我建议您这样做您删除 .when 逻辑并简单地使用 async: false 属性顺序调用该函数。

查看您的 jsonpCallback 也会很有帮助。如果您有任何变量或资源被认为是共享的，那么这也可能是一个问题。

【讨论】：

你对 .done 中的 func 是正确的，但是如何将它设置为 async 为 false？仍然是异步jsfiddle.net/ypmkn5k0 :(
如果异步给您带来问题，您可以使用类似于递归的方法。看看这个，如果您有任何问题，请告诉我。 jsfiddle.net/ypmkn5k0/2
我不知道你的最终结果，但这里有一些需要考虑的更清洁、更易于阅读的方法。 jsfiddle.net/ypmkn5k0/3
目标结束 - 只需从 URL 链中捕获一些数据而无需后端代理 - 您的示例也是正确的，但我现在更喜欢使用函数和回调创建对象：如 API = { method1:function(callback){}, method2:function(callback){} }