解决jQuery/Ajax同步请求假死或挂起，Ajax return返回undefined解决

发表于 2019年11月06日
前端

Ajax假死挂起

今天遇到一个页面中默认必须请求一组初始化数据，然后使用了pjax中介，每次进入和离开页面都会造成Ajax假死挂起，很是烦躁，于是有了这篇文章。分享一个超简单的小技巧（细节），却非常实用。虽然现在很多开始用vue一类的数据交互更好用的框架，但类似jQuery一类的项目也很多，重点在灵活的变通。

解决jQuery/Ajax同步请求假死或挂起，Ajax return返回undefined解决 — AJAX数据交互

Ajax同步优化方案一

用Deferred对象替代async:false，如下：

function sta() {
    var defer = $.Deferred();
    $.ajax({
        url: 'url',
        //async : false,//原来设置的同步要注释掉
        success: function(backData) {
            defer.resolve(backData)
        }
    });
    return defer.promise();
}
$.when(wait(sta))
    .done(function() { alert("成功了！"); })
    .fail(function() { alert("出错啦！"); });

function sta() {

var defer = $.Deferred();

$.ajax({

url: 'url',

//async : false,//原来设置的同步要注释掉

success: function(backData) {

defer.resolve(backData)

}

});

return defer.promise();

}

$.when(wait(sta))

.done(function() { alert("成功了！"); })

.fail(function() { alert("出错啦！"); });

这样就返回了一个异步对象，使用数据的时候回调就行，就是变向的实现的同步变异步。

Ajax同步优化方案二

上面的方案虽然能解决问题，但后经测试有一个方案更加简便和实用，分析页面加载数据后觉得，本身加载的数据很小，而且同步数据都保持在3个以内，完全不应该出现Ajax假死挂起的现象。因为Ajax默认都是用的异步，所以我们简单的调整了一下思路：

getData: function() {
    $.ajaxSettings.async = false; //同步
    $.getJSON(apiUrl,
        function(data) {
            console.log(data)
        });
    $.ajaxSettings.async = true; //销毁同步，否则会挂死
},

getData: function() {

$.ajaxSettings.async = false; //同步

$.getJSON(apiUrl,

function(data) {

console.log(data)

});

$.ajaxSettings.async = true; //销毁同步，否则会挂死

这个方法的关键在于请求前设置为同步，请求结束马上设置回异步，完美解决问题，并且一共就是2行代码，目前体验盒子使用第二种方法。

Ajax return返回undefined解决

以上两种方法其实也可解决ajax return返回undefined的问题，因为JS的执行顺序问题一般请求都会有延迟，要么使用同步（但是同步请求是不推荐的，会阻塞及假死），要么使用异步回调。

这里推荐一种结果回调方式，函数体：

function getCarData(type) {
    let rst;
    $.ajax({
            url: apiUrl,
            method: 'GET',
            dataType: 'json',
            async: false,
            data: {
                type: type
            },
        })
        .done(function(res) {
            let thisDate = res.data;
            rst = thisDate;
            // console.log("ajax success");
        })
        .fail(function(err) {
            // console.log("ajax error");
        })
        .always(function() {
            // console.log("ajax complete");
        });
    return rst;
}