一,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
0: "UNSENT" 请求未初始化
1: "OPENED" 请求连接已经建立
2: "HEADERS_RECEIVED" 请求已经接收
3: "LOADING" 请求处理中
4: "DONE" 请求已完成,响应已就绪
5: "onreadystatechange"
6: "readyState"
7: "timeout"
8: "withCredentials"
9: "upload"
10: "responseURL"
11: "status"
12: "statusText"
13: "responseType"
14: "response"
15: "responseText"
16: "responseXML"
17: "open"
18: "setRequestHeader"
19: "send"
20: "abort" 中止请求
21: "getResponseHeader"
22: "getAllResponseHeaders"
23: "overrideMimeType"
二,如何取消 ajax请求
上述简介可以看出在使用xhr进行异步的请求,是可以进行中止的。
方法一:xhr.abort() 调用中止api
xhr 就是 XMLHttpRequest 的实例,该实例调用对应的xhr.abort() 会终止当前的请求。
var xhr = newXMLHttpRequest();
xhr.open(‘get‘, ‘https://jianshu.com‘, true);
xhr.send();
xhr.onreadystatechange= function(){
console.log(xhr.responseText,‘-- respone‘)
}
setTimeout(()=> {xhr.abort()}, 20);
方法二:AbortController
var controller = newAbortController();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.cnblogs.com/the-last/p/12024807.html