XMLHttpRequest 取消请求

一，xmlHttpRequest介绍

是一个前后端数据通信的对象，在不刷新页面的情况下进行数据通信，在页面加载完成后请求后台服务、接收后台数据。

创建 XMLHttpRequest 对象：

xhr = new XMLHttpRequest();

xhr = new ActiveXObject("Microsoft.XMLHTTP");

创建请求

xhr.open(method, url, async);

xhr.send(string);

在使用post请求时string可选填。

请求响应

xhr.responseText; 获取字符串形式响应数据

xhr.responseXML; 获取 XML形式的响应数据

readyState请求响应阶段

xhr.onreadystatechange = function(){

xhr.readyState === 4; // Done 请求完成

xhr.status === 200; // 请求返回成功

}

xhr 对象提供的 API

1. 0: "UNSENT"  请求未初始化
2. 1: "OPENED"  请求连接已经建立
3. 2: "HEADERS_RECEIVED"  请求已经接收
4. 3: "LOADING"  请求处理中
5. 4: "DONE"      请求已完成，响应已就绪
6. 5: "onreadystatechange"
7. 6: "readyState"
8. 7: "timeout"
9. 8: "withCredentials"
10. 9: "upload"
11. 10: "responseURL"
12. 11: "status"
13. 12: "statusText"
14. 13: "responseType"
15. 14: "response"
16. 15: "responseText"
17. 16: "responseXML"
18. 17: "open"
19. 18: "setRequestHeader"
20. 19: "send"
21. 20: "abort"  中止请求
22. 21: "getResponseHeader"
23. 22: "getAllResponseHeaders"
24. 23: "overrideMimeType"

 

二，如何取消 ajax请求

上述简介可以看出在使用xhr进行异步的请求，是可以进行中止的。

 

方法一：xhr.abort() 调用中止api

xhr 就是 XMLHttpRequest 的实例，该实例调用对应的xhr.abort() 会终止当前的请求。

var xhr = new XMLHttpRequest();
xhr.open('get', 'https://jianshu.com', true);
xhr.send();
xhr.onreadystatechange= function (){
console.log(xhr.responseText, '-- respone')
}
setTimeout(() => {xhr.abort()}, 20);

 

方法二：AbortController

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

var d = fetch('www.jianshu.com',{signal}).then(d => {console.log(d)}).catch(err => {console.log(err, 'baocuo...')})
setTimeout(() => {controller.abort()}, 10);
// DOMException: The user aborted a request. "baocuo..."

 

方法三：axios.CancelToken

axios.CancelToken 

axios对abort方法进行了封装，取消请求

1，axios请求的第二个参数对象中增加一个key，cancelToken，cancelToken是 CancelToken的实例

2，实例的传参是一个函数，函数的参数是取消请求的方法

3，将这个方法透传到外层，可以在请求完成之前，随时取消请求。

 

 

三，ajax请求的拦截器原理

https://www.jianshu.com/p/115b4c79a75d 

https://www.jianshu.com/p/22b49e6ad819