我对JS/ajax很陌生,对ajax数据/成功返回有点困惑。
我有以下ajax代码。我希望它在ajax调用接收到来自imgurApi的json之后,在succes:
中运行代码。
它只适用于async: false
。我认为success:
中的位只会在检索到数据后运行,但由于某种原因,如果aysnc为true,则数据为null。
我读了很多SO答案/jQuery文档,但我似乎不知道如何让它不挂在带有async: false
的浏览器上
该代码可能在一个页面上运行100多次(即reddit.com/r/pics,一个页面加载了100个链接),因此async: false
不仅是一种糟糕的做法,而且会使页面在5到6秒内无法使用,这是不可接受的。
我曾尝试将ajax作为var
,然后调用该var .success(function(data) ...);
,但它仍然不起作用。我也尝试过用完全取代成功。
它只适用于async: false
如有任何建议,我们将不胜感激!
谢谢!
$.ajax({
type: "GET",
url: "https://api.imgur.com/3/gallery/" + hash,
dataType: "json",
headers:{
'Authorization':'Client-ID c606aeeec9ca098'
},
async: false,
success: function(data) {
if(data.data.is_album == true) {
if(data.data.images_count == 1){
el[j].href = el[j].href.replace(/(http(s)?://)?(www.)?(m.)?imgur.com/gallery/.*/, data.data.images[0].link);
}else{
el[j].href = el[j].href.replace(/(http(s)?://)?(www.)?(m.)?imgur.com/gallery//, "https://imgur.com/a/");
}
}
else{
el[j].href = el[j].href.replace(/(.*)?(http(s)?://)?(www.)?(m.)?imgur.com/.*/, data.data.link);
}
}
});
您可能会发现jQuery Deferred对象(Promises接口)非常有用。它可以让你做一些事情,比如:
var promise = $.ajax("/myServerScript1");
function getStuff() {
return $.ajax("/myServerScript2");
}
promise.then(getStuff).then(function(myServerScript2Data){
// Do something with myServerScript2Data
});
参考资料:
http://www.htmlgoodies.com/beyond/javascript/making-promises-with-jquery-deferred.html
我看不出什么对你的代码不起作用,但我可以告诉你什么是不推荐的。
-
总是有一个失败处理程序:您必须在请求对象的
fail
字段中放入一个函数。如果不这样做,您将无法看到任何错误。 -
保持测试简单:你应该从只显示请求结果的值开始,而不是用它进行一些计算。这样你就可以只调试请求调用,并且你确信问题不是来自计算代码
-
使用Promises API:正如@gibbish之前所指出的,现在做你想做的事情的方法是使用Promises。您可以使用jQuery的promise或任何其他类似ES6-promises的东西(对于大多数浏览器来说,这需要编译时间)