前端中断请求

Axios篇

axios默认使用的content-type是application/json,
方法一：设置超时时间
方法二：axio提供了一个一个CancelToken的函数，用来取消接口请求
1.首先，先定义cancel变量

data:{
	cancel:null}
1
2

2.在函数中运用

let CancelToken = axios.CancelToken
let that = this
axios({
method:"",
url:"",
cancelToken:new CancelToken(function executor(a){
	that.cancel =  a
 // 这个参数 a 就是CancelToken构造函数里面自带的取消请求的函数，
	})
}).then(res=>{}).catch(error=>{})
1
2
3
4
5
6
7
8
9
10

3.在某个函数中执行取消请求

funA(){
	this.cancel()
}
1
2
3

Ajax篇

方法一：同样是设置超时时间让Ajax自动断开
方法二：手动停止，调用XMLHttpRequest对象上的Abort方法

var ajax1 = $.ajax({

})
1
2
3

调用

ajax1.abort()
1

注意：不要用abort方法来作为终止对服务器的请求操作，只能当做在前端页面立刻停止执行ajax成功后的方法，因为你执行abort方法后，ajax很可能已经对服务端发送了请求，只是还未返回回馈信息而已。

原生Javascript

var xmlHttp = new XMLHttpRequest()
xmlHttp.open("method","url","async")
xmlHttp.onreadystatechange = function(){
//得到响应之后的操作
}
xmlHttp.send()
//设置几秒钟时候检查发送的数据是否得到响应
setTimeout("check()",2000)
//检查xmlHttp对象所发送的数据是否得到响应
function check(){
//为4时代表请求完成了
if(xmlHttp.readyState !=4){
//响应超时，关闭请求
xmlHttp.close()
}}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

或者使用abort

ver xhr = new XMLHttpRequest()
xhr.open(....)
//调用
function A(){
		xhr.abort()
}
1
2
3
4
5
6