Question

我对JS / ajax很新，并且对ajax数据/成功返回有点困惑。

我有以下ajax代码。我希望它在ajax调用收到imgur api的json之后在succes:中运行代码。

这只适用于我async: false。我认为success:中的位只会在检索到数据后运行，但由于某些原因，如果aysnc为true，则数据为空。

我已经阅读了很多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);
                        }                 
                    }
                });

Answer 1

您可能会发现jQuery Deferred对象（Promises接口）很有帮助。它允许你做这样的事情：

var promise = $.ajax("/myServerScript1");

function getStuff() {
    return $.ajax("/myServerScript2");
}

promise.then(getStuff).then(function(myServerScript2Data){
  // Do something with myServerScript2Data
});

资源（对于使用AJAX的人来说，这是写得很好并且必读的内容）：

http://www.htmlgoodies.com/beyond/javascript/making-promises-with-jquery-deferred.html

Answer 2

我无法看到您的代码无效，但我可以告诉您不推荐的内容。

始终有一个失败处理程序：您必须将一个函数放在请求对象的fail字段中。如果你没有，你将无法看到任何错误。
保持测试简单：您应该首先显示请求结果的值，而不是使用它进行一些计算。这样您就可以只调试请求调用，并且您确定问题不是来自计算代码
使用Promises API：正如@gibberish先前指出的那样，现代化的方法就是使用Promises。您可以使用jQuery的承诺或任何其他类似的ES6 Promises（这需要大多数浏览器的编译时间）

使用来自ajax调用的数据而不使用async：false

2 个答案: