原生ajax终断请求的几种方式

原生ajax终断请求的几种方式

终断请求的方式有很多种，这里就介绍一下最常见的几种

• 通过前端设置请求超时时间，这里一般会与后端设置的响应时间连在一起使用（请求后端数据量大暂不考虑）
• 假设提交表单只需要2s，当你频繁点击就会发出多次请求，为了减轻服务器压力，那么在请求时给一个参数判断服务器是否响应，如果未响应则再次请求就终断上一次请求（这里用的原生的终止，不通过节流控制方法执行时间）
• 跟第二种相似，在部分业务场景中会遇到一个请求接口的按钮，一个取消的按钮（取消为不请求接口了），方法与第二种一致

首先创建一个简单的请求

let xhr = new XMLHttpRequest(); //创建xhr对象
xhr.open("get", "http://localhost:8000/test"); //初始化设置请求方法和url
xhr.send(); //发送请求
xhr.onreadystatechange = () => {
    if (xhr.readyState === 4) {
		//判断响应状态
        if (xhr.status >= 200 && xhr.status < 300) {
            //处理结果  行  头  空行  体
			console.log(xhr.status); //状态码
			console.log(xhr.statusText); //状态字符串
            console.log(xhr.getAllResponseHeaders()); //所有响应头
            console.log(xhr.response); //响应体
		}
	}
};

//第一种： 设置请求超时时间
//超时设置
xhr.timeout = 2000;

//第二种：设置变量控制 是否终止请求
let isSending = false; //是否正在发送ajax请求
//触发接口后加入判断
if (isSending) xhr.abort();
//在拿响应体的时候在设置为false
if (xhr.status >= 200 && xhr.status < 300) {
    isSending = false;
}

//第三种：其他按钮控制是否终止请求
cancelBtn.onclick = function () {
        xhr.abort();
};