Fetch —— 中止尚未完成的接口请求

最新推荐文章于 2025-06-11 09:00:22 发布

「已注销」

最新推荐文章于 2025-06-11 09:00:22 发布

阅读量6.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端小技巧文章标签：中止请求 fetch

本文链接：https://blog.youkuaiyun.com/Wu_shuxuan/article/details/80831150

前端小技巧专栏收录该内容

29 篇文章

订阅专栏

当用户在页面间快速切换时，未完成的接口请求可能导致体验下降。本文介绍了如何利用AbortController来中止fetch请求，确保在离开页面时终止所有待处理请求，从而优化用户界面的响应速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述：

在项目开发中会遇到用户在一个页面中多次点击之后，再点击下一个页面。但是会遇到上一个页面的接口请求还在pending当中，第二个页面的接口请求会排队等待。这样就会非常影响用户的体验，所以要做到离开一个页面的同时也中止这个页面上所有尚未完成的接口请求。

问题解决：

构造函数

AbortController.AbortController()创建一个新的AbortController 对象实例。
属性

AbortController.signal 只读返回一个AbortSignal对象实例，它可以用来 with/abort 一个DOM请求
方法

AbortController.abort()中止一个尚未完成的DOM请求。这能够中止fetch 请求，任何响应Body的消费者和流。

具体使用（react中）：

1、在componentDidMount中实例化

  componentDidMount =() =>{
    if ("AbortController" in window) {
      window.controller = new AbortController();
      this.setState({
        signal: controller.signal,
      })
    }
}

2、请求时添加一个请求对象 { signal }

resetVehicleRedis =()=>{
    let HostFormData = new FormData();
    HostFormData.append('key','diuber2017');
    HostFormData.append("secret_key", '09e8b1b88e615f0d9650886977af33e9');
    request('/api/web/admin_setting/resetVehicleRedis',{
      method:'POST',
      body:HostFormData,
      credentials: 'include',
      signal:this.state.signal,
    }).then((data)=> {}).catch(()=>{})
  }

3、离开页面中止请求

  componentWillUnmount = ()=>{
    if ("AbortController" in window) {
      window.controller.abort();
    }
  }