如何优雅地取消请求：前端开发者必知的几个实用技巧和坑点避免

优化前：卡得不行

最近在做一个项目，用户反馈说页面加载特别慢，尤其是列表页。每次一刷新，页面就卡得不行，等个十几秒才出数据。这用户体验简直太差了，我赶紧着手优化。

找到症结了！

首先，我用浏览器的开发者工具（F12）看看网络请求，发现有大量的请求堆积在一起，有些请求甚至还在等待中。这显然不是个好现象。再看看性能面板，发现CPU使用率也挺高的，特别是在数据渲染的时候。

经过一番排查，我发现主要问题在于API请求过多，而且很多请求都是不必要的。更糟糕的是，有些请求在用户离开页面后还在继续，导致资源浪费。

优化方法：取消冗余请求

既然找到了问题，那就开始动手优化吧。我的目标是减少不必要的请求，提高页面加载速度。

首先是优化代码，我在每个请求里加了一个AbortController来取消请求。这样，当用户离开页面时，请求可以被及时取消，不至于浪费资源。

优化前的代码：

fetch('https://jztheme.com/api/data')
  .then(response => response.json())
  .then(data => {
    // 处理数据
  })
  .catch(error => console.error('Error:', error));

优化后的代码：

const controller = new AbortController();
const signal = controller.signal;

fetch('https://jztheme.com/api/data', { signal })
  .then(response => response.json())
  .then(data => {
    // 处理数据
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('请求已取消');
    } else {
      console.error('Error:', error);
    }
  });

// 在组件卸载时取消请求
window.addEventListener('beforeunload', () => {
  controller.abort();
});

这里注意，AbortController是个好东西，它能帮助我们优雅地取消请求。不过，要注意在组件卸载时调用controller.abort()来取消请求。

优化后：流畅多了

优化完之后，我重新测试了一下，效果立竿见影。页面加载时间从原来的十几秒降到了两秒左右，用户体验大幅提升。

当然，这只是第一步。我还对其他一些请求进行了类似的优化，比如图片加载、异步脚本加载等。通过合理地取消那些不必要的请求，整个页面的性能得到了显著提升。

性能数据对比

为了验证优化效果，我用Lighthouse工具进行了性能测试。优化前，页面加载时间是15秒左右，优化后，页面加载时间降到了2秒。这数据还是挺让人满意的。

• 优化前：页面加载时间15秒
• 优化后：页面加载时间2秒

不仅如此，CPU使用率也明显下降了，用户的体验也变得更加流畅。

以上是我的优化经验，有更好的方案欢迎交流

这次优化虽然解决了大部分问题，但还有一些小问题需要后续优化。比如说，有些请求在极端情况下仍然会有延迟。不过总体来说，效果还是不错的。希望这些经验对你有帮助，如果有更好的优化方案，欢迎在评论区交流。

这个技巧的拓展用法还有很多，后续我会继续分享这类博客。如果你有任何问题或建议，也可以随时留言。