jQuery Deferred 提前解决

Question

我很难让 jQuery deferreds 为我工作。

我正在尝试使用下面列出的模式将多个函数调用链接在一起，这些函数调用使用 jQuery .then 语句进行 $.ajax 调用，但是每个函数都在 ajax 之前返回（因此链继续）通话已解决。

// earlier code runs fine to here
})
.then(function (r) {
    getCurrentYearAbsenceRequestData(); // calls function which contains a $.ajax request
})
.then(function (r) {
    restructureCurrentYearAbsenceData();
});

// further processing of results

上面调用的函数遵循这种模式：

function getCurrentYearAbsenceRequestData() {
var dfd = $.Deferred();

    var today = moment();
    var startOfCurrentHolidayYear = moment($clnt.holidayYearStartDate, "DD MMMM").format("DD/MM/YYYY");
    var startDayOfCurrentHolidayYear = moment().dayOfYear(startOfCurrentHolidayYear)
    var currentDayOfYear = moment().dayOfYear();

    if (moment(today).isBefore(startOfCurrentHolidayYear)) { //checks if holiday year started last year
        startOfCurrentHolidayYear = moment(startOfCurrentHolidayYear).subtract(1, "years"); //if so subtract 1 year from start of currently holiday year date
    };

    console.log("Start of Holiday year is " + startOfCurrentHolidayYear);

    var getOrgDataQuery = $apiUrl + "/web/lists/getbytitle('AbsenceRequests')/Items?$select=Id,AssocBranch/Title,DateFrom,DateTo,EmployeeLookup/EmployeeName,EmployeeLookup/Id,AbsenceType/AbsenceTypeShort,ReviewOutcome,TotalDays,AbsenceNotes&$expand=AssocBranch/Title,EmployeeLookup/EmployeeName,AbsenceType/AbsenceTypeShort&$filter=DateFrom ge '" + startOfCurrentHolidayYear + "'";

        $.ajax(_cnxRest.getRequest(getOrgDataQuery)) //calls personal library function which formats the parameter - this works OK)
            .done(function (r) {
                console.log("Get Org data success" + r);
                var $absDataCurrentYearData = r.d.results;
                $absData.allCurrentYear = $absDataCurrentYearData;

             dfd.resolve();
            })
        .fail(function (err) {
            logError(err);
        });
    };

    return dfd.promise();

};

我希望在后续的 .then 函数进行之前解决 $.ajax 调用，并且很高兴收到一些关于我哪里出错的明智建议。

Answer 1

异步函数必须返回一个 Promise 以便通知其调用者异步性。否则，调用者的.then(...).then(...) 链将继续，而不考虑异步性，这是问题中描述的症状。

你只是错过了一些回报，尽管代码也可以稍微整理一下。

// earlier code runs fine to here
.then(function (r) {
    return getCurrentYearAbsenceRequestData();
//  ^^^^^^
})
.then(function (r) {
    return restructureCurrentYearAbsenceData();
//  ^^^^^^
})
.fail(function (err) {
    logError(err); // by logging here you will see reported errors arising from the entire chain.
});

function getCurrentYearAbsenceRequestData() {
    var startOfCurrentHolidayYear = moment($clnt.holidayYearStartDate, "DD MMMM").format("DD/MM/YYYY");
    if(moment(moment()).isBefore(startOfCurrentHolidayYear)) {
        startOfCurrentHolidayYear = moment(startOfCurrentHolidayYear).subtract(1, "years");
    };
    var getOrgDataQuery = $apiUrl + "/web/lists/getbytitle('AbsenceRequests')/Items?$select=Id,AssocBranch/Title,DateFrom,DateTo,EmployeeLookup/EmployeeName,EmployeeLookup/Id,AbsenceType/AbsenceTypeShort,ReviewOutcome,TotalDays,AbsenceNotes&$expand=AssocBranch/Title,EmployeeLookup/EmployeeName,AbsenceType/AbsenceTypeShort&$filter=DateFrom ge '" + startOfCurrentHolidayYear + "'";
    return $.ajax(_cnxRest.getRequest(getOrgDataQuery))
//  ^^^^^^
    .then(function(r) {
        $absData.allCurrentYear = r.d.results;
        retrun r; // make the result available to the next step in the caller's .then chain, even if it's not going to be used
//      ^^^^^^
    });
};

主链可以简化为：

.then(getCurrentYearAbsenceRequestData) // calls function which contains a $.ajax request
.then(restructureCurrentYearAbsenceData)
.fail(function(err) {
    logError(err);
});

这里，reruns 是写在命名函数中的那些。