Layui表格默认无超时机制，需手动配置request函数并设置xhr.timeout，超时后调用fail({status:0,statusText:'timeout'})才能被捕获。
异步加载超时错误为什么捕获不到
Layui 表格默认不设请求超时，XMLHttpRequest 会一直等待后端响应，直到浏览器主动终止（如 Chrome 约 5 分钟），此时不会触发 error 回调，也不会进 parseData —— 它根本没收到任何响应体。你看到的“转圈不动”或控制台静默，大概率就是卡在超时前的等待状态。
怎么给 request 加上超时控制
必须手动配置 request 选项，绕过 Layui 默认的内部请求逻辑。它允许你完全接管请求过程，包括设置 timeout 和监听 onerror/ontimeout。
-
request是一个函数，接收两个参数：obj（含url、where、page等）和success（成功回调）、fail（失败回调） - 在函数内用原生
fetch或XMLHttpRequest发起请求，并显式设置timeout - 超时后必须调用
fail({status: 0, statusText: 'timeout'})，否则表格无法识别为失败 - 别忘了处理网络中断、CORS 拒绝等非 HTTP 错误，它们也会进
onerror
示例（使用 XMLHttpRequest）：
request: function(obj, success, fail) {
const xhr = new XMLHttpRequest();
xhr.timeout = 10000; // 10秒超时
xhr.open('GET', obj.url + '?' + $.param(obj.where));
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
try {
success(JSON.parse(xhr.responseText));
} catch (e) {
fail({ status: 0, statusText: 'invalid json' });
}
} else {
fail({ status: xhr.status, statusText: xhr.statusText });
}
};
xhr.ontimeout = function() {
fail({ status: 0, statusText: 'timeout' });
};
xhr.onerror = function() {
fail({ status: 0, statusText: 'network error' });
};
xhr.send();
}
fail 回调里怎么区分超时和其他错误
靠 fail 传入对象的 statusText 字段判断最直接，Layui 不会覆盖你传进去的内容。
-
statusText === 'timeout'→ 明确是超时 -
status === 0 && statusText === 'network error'→ 断网或跨域拦截 -
status >= 400→ 后端返回了 HTTP 错误码 - 所有情况都建议调用
table.clearCache()避免后续 reload 复用脏状态
可在 fail 中统一处理 UI 反馈：
fail: function(res) {
if (res.statusText === 'timeout') {
layer.msg('请求超时，请检查网络', {icon: 2});
} else if (res.status === 0) {
layer.msg('连接失败，请重试', {icon: 2});
} else {
layer.msg('服务异常：' + res.status, {icon: 2});
}
table.clearCache('demo');
}
为什么不用 axios 或 fetch 封装 request
可以，但要注意两点：
-
fetch默认不带超时，需用AbortController+setTimeout模拟，稍繁琐 - 无论用啥库，最终都必须把解析后的 JSON 对象传给
success()，把错误对象传给fail()—— 这是 Layui 唯一认的接口契约 - 引入额外库会增加首屏体积，纯原生
XMLHttpRequest足够轻量且兼容性更好（Layui 本身也这么用）
超时不是后端问题，而是前端必须兜底的边界场景。不设 timeout，用户就只能干等；设了却没接住 fail，表格就永远卡在 loading 状态——这两点漏掉任何一个，体验就断了。
