使用ajax调用中的数据而不使用async:false

Use data from ajax call without using async: false

本文关键字：async false 调用 ajax 数据 使用      更新时间：2023-09-26

我对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

我看不出什么对你的代码不起作用，但我可以告诉你什么是不推荐的。

  1. 总是有一个失败处理程序：您必须在请求对象的fail字段中放入一个函数。如果不这样做，您将无法看到任何错误。

  2. 保持测试简单：你应该从只显示请求结果的值开始，而不是用它进行一些计算。这样你就可以只调试请求调用，并且你确信问题不是来自计算代码

  3. 使用Promises API：正如@gibbish之前所指出的，现在做你想做的事情的方法是使用Promises。您可以使用jQuery的promise或任何其他类似ES6-promises的东西（对于大多数浏览器来说，这需要编译时间）

相关文章：