存在待处理HTTP请求时window.history.pushState无法正常工作的问题咨询

我来帮你拆解下这个问题：当那个耗时较长的HTTP请求还在处理时，你调用window.history.pushState()切换了URL，但请求完成后URL又跳回了之前的地址——核心原因大概率是长请求的回调函数里，又执行了一次修改浏览器历史记录的操作（比如再次调用pushState或者replaceState），把用户手动导航的URL给覆盖了。

给你几个可行的解决思路：

1. 标记用户导航状态，跳过后续的历史修改 #

在代码里加一个全局状态变量，用来标记用户是否已经手动导航到其他页面：

let isUserInitiatedNavigation = false;

当用户点击已加载完成的磁贴时，在调用pushState前把这个变量设为true：

// 用户点击磁贴的事件处理函数
function handleTileClick(url) {
  isUserInitiatedNavigation = true;
  window.history.pushState({ path: url }, '', url);
  // 执行你的页面过渡逻辑...
}

然后找到长请求的回调函数，在里面先判断这个标记，如果用户已经手动导航了，就跳过修改历史记录的代码：

// 长HTTP请求的回调函数
function longRequestCallback(response) {
  if (isUserInitiatedNavigation) {
    return; // 用户已经导航到其他页面，不执行后续的历史修改操作
  }
  // 原来的请求成功处理逻辑（包括可能的history操作）...
}

2. 用AbortController取消未完成的长请求 #

如果那个长请求在用户导航后已经没有必要继续执行了，可以直接取消它，从根源上避免后续的冲突回调：

// 初始化长请求时创建AbortController
const abortController = new AbortController();
const signal = abortController.signal;

// 发起长请求
fetch('/your-long-request-url', { signal })
  .then(response => {
    // 请求成功处理逻辑
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('长请求已被取消');
      return;
    }
    // 其他错误处理逻辑
  });

// 用户点击磁贴时取消请求并执行导航
function handleTileClick(url) {
  abortController.abort();
  window.history.pushState({ path: url }, '', url);
  // 页面过渡逻辑...
}

3. 检查历史记录的修改逻辑 #

仔细排查长请求相关的代码，看看有没有在请求完成后无条件执行pushState/replaceState的逻辑——比如可能是在渲染数据后自动同步URL，但此时用户已经切换了页面。这种情况下要加入判断，确保只有当前页面还是请求发起时的页面，才执行历史修改操作。

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