前端终止请求的3种方式总结(ajax、axios)

// 创建XMLHttpRequest对象
const xhr = new XMLHttpRequest();
// 请求地址
const url = "https://developer.mozilla.org/";
// 初始化请求
xhr.open('GET', url, true);
// 发送请求
xhr.send();
// 监听取消请求
xhr.addEventListener('abort', function () {
	console.log('请求被abort()取消了');
});
// 定时器模拟取消请求
setTimeout(() => {
	// 取消请求
	xhr.abort();
	// 取消请求之后的状态status
	console.log('abort()之后的xhr.status---', xhr.status);
	// 取消请求之后的状态readyState
	console.log('abort()之后的xhr.readyState---', xhr.readyState);
}, 100);

// 以vue项目中使用axios为例
// 创建请求控制器 
this.controller = new AbortController();
console.log("初始声明的请求控制器------", this.controller);
// 第一种方法：绑定事件处理程序
this.controller.signal.addEventListener("abort", () => {
   console.log("请求已终止，触发了onabort事件");
   // 进行后续处理
});
// 第二种方法：try...catch
try {
    // 发送文件上传请求
    const res = await this.$axios.post(api.Upload, uploadData, {
     timeout: 0, // 设置超时时间为 0/null 表示永不超时
     signal: this.controller.signal, // 绑定取消请求的信号量
	});
} catch (error) {
    console.log("终止请求时catch的error---", error);
    // 判断是否为取消上传
    if (error.message == "canceled"){
        // 进行后续处理
    };
}
// 终止请求
this.controller.abort();
console.log("终止请求后的请求控制器------", this.controller);

// 以vue项目中使用axios为例
// 这个地方需要导入原生的axios 最好不要使用二次封装后的axios
import axios from "axios";
// 创建请求令牌
this.source = axios.CancelToken.source();
console.log("初始声明的请求令牌---", this.source);
// 第二种方法：try...catch
try {
    // 发送文件上传请求
    const res = await this.$axios.post(api.Upload, uploadData, {
     timeout: 0, // 设置超时时间为 0/null 表示永不超时
     cancelToken: this.source.token, // 绑定取消请求的令牌
	});
} catch (error) {
    console.log("终止请求时catch的error---", error);
    // 判断是否为取消上传
    if (error.message == "自定义取消请求的message"){
        // 进行后续处理
    };
}
// 终止请求
this.source.cancel("自定义取消请求的message");
console.log("取消请求后的请求令牌---", this.source);