javascript - 关于jQuery deferred 多个AJAX执行问题

Question

我写了两个函数，分别是使用AJAX请求数据，为了能控制他们的执行顺序，也不想改变AJAX的异步开关，发现使用deferred写法后，fail和done方法都执行了

代码：

    function func1(dfd) {
         
            $.ajax({
                type: "POST",
                timeout: 10 * 1000,
                contentType: "application/x-www-form-urlencoded; charset=utf-8",
                data: { },
                url: ""
            }).done(function (msg) {
                dfd.resolve();
            }).fail(function (XMLHttpRequest, textStatus, errorThrown) {
                dfd.reject();
            });
        }

        return dfd;
    }
    
            function func2() {
        $.ajax({
            type: "POST",
            timeout: 5 * 1000,                
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            data: {  },
            url: ""
        }).done(function (msg) {
            }
        }).fail(function (XMLHttpRequest, textStatus, errorThrown) {
            console.log(XMLHttpRequest.status + "|" + XMLHttpRequest.statusText);
        });
    }
    
    $(document).ready(function () {            
        var defer = new $.Deferred();
        $.when(fucn1(defer)).done(func2()).fail(function () { alert("fail") });
        });

Answer 1

你写的代码有问题，我帮你改了下：

function func1(dfd) {
     
        $.ajax({
            type: "POST",
            timeout: 10 * 1000,
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            data: { },
            url: ""
        }).done(function (msg) {
            dfd.resolve();
        }).fail(function (XMLHttpRequest, textStatus, errorThrown) {
            dfd.reject();
        });
        return dfd;
    }
    // return dfd;



        function func2() {
    $.ajax({
        type: "POST",
        timeout: 5 * 1000,                
        contentType: "application/x-www-form-urlencoded; charset=utf-8",
        data: {  },
        url: ""
    }).done(function (msg) {
        }
    }).fail(function (XMLHttpRequest, textStatus, errorThrown) {
        console.log(XMLHttpRequest.status + "|" + XMLHttpRequest.statusText);
    });
}

$(document).ready(function () {            
    var defer = new $.Deferred();
    // func1
    $.when(func1(defer)).done(func2()).fail(function () { alert("fail") });
    });