开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第24天，点击查看活动详情
Ajax 是一种从客户端脚本加载服务器数据的方法，从服务器获取到数据、再进行更新 DOM ，并且无需刷新整个页面。我们在写前端代码的时候调用接口数据的方式就是 Ajax。浏览器为我们提供了进行异步请求的两个 API，分别是 XMLHttpRequest 和 Fetch
XMLHttpRequest 和 Fetch
XMLHttpRequest，也可称为 XHR 对象，在更新数据的时候可以只更新局部的数据，而不是每次都更新整个页面，影响用户的操作。
- 创建 XMLHttpRequest 对象（xhr = new XMLHttpRequest();）
- 创建请求
- 请求响应
- 取消请求
XMLHttpRequest.abort() 方法：
在页面加载后从服务器请求数据。如果请求已被发出，就会立刻终止请求。readyState 会被置为 XMLHttpRequest.UNSENT （0），status 置为 0
const xhr = new XMLHttpRequest();
xhr.open('GET', '<http://test/getData>', true);
xhr.send();
setTimeout(() => {
xhr.abort(); }, 1000);
Fetch 是基于 promise 的 Ajax 请求 API,取消请求时，可以使用 AbortController。
AbortController 是一个控制器对象,可以中止中止一个或多个 Web 请求
具体操作：
const controller = new AbortController();
this.signal = controller.signal;
fetch(`/test/getData`, {
signal: this.signal
})
setTimeout(() => {
controller.abort();
}, 1000);
取消请求后，在浏览器的 network 部分可以看到接口的 status 状态，会变成 canceled 状态
Axios 取消接口的请求
平时我们常用的 Axios 是作用于 node 和浏览器中并且基于 promise 的网络请求库，
- 客户端：从浏览器创建 XMLHttpRequests
- 服务端：从 node.js 创建 http 请求
Axios 提供了两种方法来进行取消请求：
- AbortController.abort
const controller = new AbortController();
axios.post('/test/requestData', { data:data }).then(res => {
consoloe.log(res,'执行成功')
});
controller.abort() // 取消请求
- CancelToken
- Axios 对 前面提到的 abort 方法进行了封装
- 可以使用同一个 cancel token 或 signal 取消多个请求
- 此方法自
v0.22.0开始已被弃用
let CancelToken = axios.CancelToken;
关于 Axios 中取消请求的具体的操作，可参考 Axios文档
