取消ajax请求原理,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

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