jQuery 推迟及早解决

Question

我很难让 jQuery 延迟为我工作。

我正在尝试将多个函数调用链接在一起，这些函数调用使用 jQuery .then 语句进行 $.ajax 调用，使用下面列出的模式，但是每个函数都返回（因此 then 链继续）在 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();

};

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

Answer 1

异步函数必须 return 一个 promise 才能将异步通知给调用者。否则调用者的 .then(...).then(...) 链将继续而不考虑异步，这是问题中描述的症状。

您只是遗漏了一些 return，尽管代码还可以稍微整理一下。

// 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);
});

在这里，重播是在命名函数中编写的。

jQuery 推迟及早解决

jQuery Deferred resolving early

ajax

jquery-deferred