页面跳转取消请求操作实现

页面跳转取消请求操作

场景：当从A页面跳转到B页面时，发生在A页面到请求操作仍然在进行，那么B页面到请求操作就会被加入到队列中等待。在某些情况下，A页面到请求结果对我们来说已经没有了任何意义，所以主动把正在进行对请求取消掉，可以优化程序。

• javascript

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

BtnStart.addEventListener('click',fetchVideo);
BtnAbort.addEventListener('click',function(){
	controller.abort();
});

//请求函数
function fetchVideo(){
	fetch(url,{signal}).then(function(){
	//xxxxxx进行操作
}).catch(function(e){
	reports.textContent='Download error:' + e.message;
});
}

通过创建AbortController对象，以这个对象对signal作为标识，在用户触发了abort() 时，则取消fetch，并返回了一个abortError。

• react中实现
  1⃣️实例化AbortController

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

2⃣️在请求中加入signal

request =()=>{
	fetch(url,{signal}).then(function(response){
		//xxxxx请求操作	
	}).catch(function(e){
		reports.textContent = 'Download error:' + e.message;
	})
}

3⃣️在页面中unMount时，触发abort()

componentWillUnmount(){
	if('AbortController' in window){
		window.controller.abort();
	}
}