基于jQuery.ajax获取分页结果时自封装函数返回undefined问题排查

你遇到的返回undefined问题，主要是几处代码疏漏导致的：

• 函数没有向外返回最外层的AJAX Promise链：getPagedAjax内部执行完jQuery.ajax().then(...)后没有加return，函数执行完默认返回undefined，自然无法链式调用.done()方法绑定回调
• 分页请求结果处理不符合jQuery的传参规则：当向jQuery.when传入多个AJAX请求时，成功回调的参数会按每个请求拆成独立的参数组（格式为[响应数据, 状态文本, jqXHR实例]），直接拼接Array.from(arguments)会把状态文本、jqXHR实例混进最终结果，拿到的不是纯接口返回数据
• 存在冗余无效代码：第一次请求留了空的success回调，jQuery的Promise链本身会自动把成功响应透传给后续.then回调，空回调没有任何实际作用
• 存在潜在报错风险：计算分页依赖的itemsPerPage是全局变量，如果未提前定义会直接触发分页计算逻辑报错，且代码没有对仅单页结果的场景做兜底，会发起无意义的空请求

// 把itemsPerPage作为函数参数传入，避免依赖全局变量
function getPagedAjax(url, data, type = 'GET', itemsPerPage = 10) {
    // 必须把整个Promise链return出去，让函数返回可绑定回调的Deferred对象
    return jQuery.ajax({
        type: type,
        url: url,
        data: data,
        dataType: 'JSON'
    }).then(function(firstPageResp) {
        const totalCount = firstPageResp.data.total;
        const totalPages = Math.ceil(totalCount / itemsPerPage);

        // 仅单页结果时直接返回，不发多余请求
        if (totalPages <= 1) {
            return [firstPageResp];
        }

        // 构造从第2页开始的所有分页请求
        const pageRequestList = [];
        for (let page = 2; page <= totalPages; page++) {
            const reqData = jQuery.extend({}, data, { page: page });
            pageRequestList.push(
                jQuery.ajax({
                    type: type,
                    url: url,
                    data: reqData,
                    dataType: 'JSON'
                })
            );
        }

        // 等待所有剩余页请求完成，清洗返回参数
        return jQuery.when(...pageRequestList).then(function(...otherPageResps) {
            // 从每个参数组中只提取实际的JSON响应数据
            const cleanResps = otherPageResps.map(item => item[0]);
            // 合并第一页+其他页的结果统一返回
            return [firstPageResp, ...cleanResps];
        });
    });
}

getPagedAjax('接口地址', {查询参数}).done(function(allPageResults) {
    console.log('所有分页返回结果：', allPageResults);
    // 在这里写自定义处理逻辑即可
});

• 需要和后端接口确认页码计数规则，确保构造的页码和接口要求一致，避免页码错位
• 如果接口有并发数限制，不要一次性发起所有剩余页的请求，可以加简单的请求队列控制并发量，避免触发接口限流
• 当前实现是等所有分页请求全部成功后才触发回调，如果需要逐页拿到结果即时处理，可以调整为逐页请求的异步流程

内容的提问来源于stack exchange，提问作者axiom