使用Ajax重载JS Datatables遇TypeError错误的解决求助

问题场景 #

我是JS新手，用Meteor框架结合Datatables开发一个展示AWS存储桶文件、支持下载/删除的应用。服务器端的删除逻辑已经完成，但调用template.table.ajax.reload()刷新表格时，一直报TypeError: xhr.abort is not a function错误。排查后发现，本该包含abort()方法的xhr对象，实际是一个已兑现但结果为undefined的Promise。

试过删除后重新加载整个表格，但会导致页面刷新，列表回到第一页；也试过table.ajax.url().load()，同样没有效果。

初始代码 #

表格初始化和删除按钮的核心代码如下：

Template.Home.onRendered(async function () {
    this.table = $('#bucketItemTable').DataTable({
        "ajax": async function(data, callback, settings) {
            const tableData = await new Promise((resolve, reject) => {
                // 调用服务器端方法获取表格数据
                Meteor.call("refreshList", (error, result) => {
                    if (error) return reject(error);
                    resolve(result);
                });
            });

            callback( { data: tableData } );
        }
    });
});

Template.Home.events({
    // 删除按钮：先执行删除操作，再刷新表格
    'click .btn-delete': async function(e, template) {
        ... // 省略删除AWS存储桶文件的Meteor调用逻辑

        template.table.ajax.reload();
    }
});

问题原因 #

Datatables的自定义ajax函数要求返回一个带有abort()方法的XHR对象（或兼容的可中止对象），但这里直接用了async函数作为ajax配置项——async函数默认会返回Promise，而这个Promise并没有abort()方法，所以调用ajax.reload()时就会触发错误。

解决方法 #

把异步逻辑包装在一个内部函数中，不让外层的async函数直接返回Promise（或者说让外层函数的返回值不被Datatables当成XHR对象处理），修改后的ajax配置代码如下：

"ajax": async function(data, callback, settings) {
    let ajaxFunc = async function () {
        const tableData = await new Promise((resolve, reject) => {
            Meteor.call("refreshList", (error, result) => {
                if (error) return reject(error);
                resolve(result);
            });
        });

        callback( { data: tableData } );
    }
    ajaxFunc();
}

这样外层的async函数虽然仍返回Promise，但Datatables不会将其作为XHR对象处理，内部的异步逻辑通过调用callback传递数据，就能正常执行ajax.reload()刷新表格了。

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