网关超时那几分钟,提交按钮一直在转,既不成功也不报错。用户以为没点上,连点三次,恢复后后台多了三张一样的工单。乍看像缓存或者权限的锅,追下去往往不是。
btn.disabled = true;
btn.textContent = '提交中…';
try { await submit(); }
catch (e) { toast('提交失败,请重试'); }
finally { btn.disabled = false; btn.textContent = '提交'; }
追下去是这么回事:loading 状态只在 then 里复位,请求抛错走的是 catch,按钮永远停在加载中。失败又没有提示,用户只能靠再点一次来确认。
「提交按钮 loading」这个问题文档写得含糊,实际行为以当前版本为准,别照旧版本的结论套。验证用真实数据走一遍,测试数据太干净,边界情况根本碰不到。
能分两步做的操作就别合成一步,中间看一眼返回值,出问题好判断。报错里带路径的,先去看那个路径在不在、权限对不对。
具体做法是,把复位放进 finally,成功失败都恢复按钮;给请求加超时中断,超过 15 秒按失败处理并提示重试;失败时保留已填内容,同时用一次性令牌让服务端去重。
验收就看一点,断网后点提交,15 秒内按钮恢复可点并出现失败提示,恢复网络重试只生成一条记录。
