React实现在跳转路由的时候取消挂起的请求

需求描述

      当前项目中存在着很多图表，基本上每个图表都是单独的一个请求，所以每当切换路由的时候，前一个路由的请求并未取消，会给后台带来压力，并且造成资源的浪费，所以当请求已发送但还是挂起状态（pending）时我跳转到了B页面，那么A页面的请求就要被取消掉了

• 优化前

• 优化后

  
  

实现方式

       项目中通过abort-controller这个包实现的，因为之前不知道是内置的api，所以引入了该依赖包，所以在打包的时候就会出错，其实window里面就内置了这个方法。具体可预览该链接下对abort-controller的了解。

developer.mozilla.org/zh-CN/docs/…

• 在fetch里面修改第二个参数里的配置

 fetch(URL, {       
 method: 'GET',        
 credentials: 'include',        
 mode: 'cors',        
 signal: window.hasOwnProperty('controller') ? 
 window.controller.signal : null,//判断window是否已经有实例化的AbortController对象，没则为null      
})

• 组件挂载时实例window里面AbortController这个对象，赋值给window里面的自定义的一个属性

componentDidMount() {
pageHeaderStore.init();
window.controller = new window.AbortController();
}

• 监听url的变化拦截上个路由未发出还是挂起的请求

function proxy(history, state, fn) {
const cb = history[state];
history[state] = function(){cb.apply(history, arguments),(function(history) {return formate(history, 'Function');})(fn) && fn(Array.prototype.slice.call(arguments));};}
function formate(history, str) {return `[object ${str}]` === {}.toString.call(history);}
proxy(window.history, 'pushState', () => {if (window.hasOwnProperty('controller')) {window.controller.abort();window.controller = null;window.controller = new window.AbortController();}});