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

问题描述：

在项目开发中会遇到用户在一个页面中多次点击之后，再点击下一个页面。但是会遇到上一个页面的接口请求还在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();
    }
  }