中止 Web 请求新方式 - AbortController API

AbortController 是一个 JavaScript API，用于中止一个或多个 Web 请求。它最初是 Fetch API 的一部分，但现在已成为一个独立的接口，可以用于其他异步任务。

AbortController 是 Web 标准的一部分，由 WHATWG 制定，是现代浏览器原生支持的 API。

核心用途

AbortController 的主要作用是提供一种标准化的方式来取消正在进行的异步操作，比如：

• 取消 fetch 请求

• 中止 XMLHttpRequest

• 停止其他异步任务

• 清理事件监听器

示例1：基础使用

const controller = new AbortController();axios.get('https://api.example.com/data', {signal: controller.signal
}).then(response => console.log(response.data)).catch(error => {if (error.name === 'CanceledError') {console.log('请求已取消');} else {console.error('其他错误:', error);}});// 取消请求
controller.abort();

示例2：多个相关请求的取消

class DataFetcher {constructor() {this.mainController = null;}async fetchUserData(userId) {// 取消之前的用户数据请求if (this.mainController) {this.mainController.abort();}this.mainController = new AbortController();const signal = this.mainController.signal;try {// 并行发起多个相关请求const [user, posts, friends] = await Promise.all([this.fetchUser(userId, signal),this.fetchUserPosts(userId, signal),this.fetchUserFriends(userId, signal)]);return { user, posts, friends };} catch (error) {if (error.name !== 'AbortError') {throw error;}}}async fetchUser(userId, signal) {const response = await fetch(`/api/users/${userId}`, { signal });return response.json();}async fetchUserPosts(userId, signal) {const response = await fetch(`/api/users/${userId}/posts`, { signal });return response.json();}async fetchUserFriends(userId, signal) {const response = await fetch(`/api/users/${userId}/friends`, { signal });return response.json();}
}

兼容性处理

// 简单的 polyfill
if (typeof AbortController === 'undefined') {class AbortController {constructor() {this.signal = new AbortSignal();}abort() {this.signal.aborted = true;if (this.signal.onabort) {this.signal.onabort();}}}class AbortSignal {constructor() {this.aborted = false;this.onabort = null;}}window.AbortController = AbortController;
}

END.