页面加载（刷新）后XHR请求被取消自动重试成功，求原因及解决方法

页面加载（刷新）后，XHR请求会被取消，随后相同的请求自动发起并执行成功。该请求用于从数据库获取数据，后端相关代码片段如下：

public async Task<IReadOnlyCollection<ABCModel>> Get(CancellationToken cancellationToken)
{
    using var unitOfWork = _unitOfWorkFactory.Create();

    var abcRepo = unitOfWork.GetRepository<ABC>();

    return await abcRepo.AsQueryable()
        .Select(c => new ABCModel
        {
            Id = c.Id,
            Code = c.Code
        })
        .OrderBy(c => c.Code)
        .ToArrayAsync(cancellationToken);
}

请求状态截图：

可能的原因 #

• 前端组件卸载重渲染：页面刷新或组件重新挂载时，原请求因组件卸载被浏览器取消，组件重新加载后再次发起请求。
• 请求关联的CancellationToken触发：前端请求中断时，后端接收的CancellationToken被触发，导致第一个请求终止；新请求携带有效的token，因此执行成功。
• 前端重复请求拦截逻辑：前端的重复请求处理机制误将初始请求判定为重复并取消，随后重新发起合法请求。
• 浏览器预加载机制：部分浏览器的预加载策略会发起试探性请求，完成预加载后自动取消该请求，再发起正式请求获取数据。

解决方法 #

前端优化方向 #

• 规范组件生命周期管理：在组件卸载时通过请求的取消函数终止未完成的请求，同时确保组件初始化时仅触发一次请求，避免重复渲染导致的请求重复发起。例如React中在useEffect的清理函数中调用请求的取消方法，Vue中利用onUnmounted处理。
• 调整请求触发逻辑：通过状态标记避免重复发起请求，比如设置加载状态，只有在未加载时才发起请求；或使用防抖逻辑控制请求触发频率。
• 禁用不必要的预加载：若为浏览器预加载导致，可通过响应头或前端meta标签禁用对应资源的预加载。

后端优化方向 #

• 验证CancellationToken传递逻辑：确认前端请求中断时token是否正常触发取消。如果业务允许，可在特定场景下临时忽略token（不推荐长期使用），或确保token仅在必要场景下生效。
• 优化数据库查询性能：若请求耗时过长导致前端超时取消，可通过添加索引、简化查询逻辑等方式缩短响应时间，避免因超时引发的请求取消。

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