UD5工具箱
- AbortController
- AbortController 是 W3C 标准化的 Web API，用于在需要时中止一个或多个 DOM 请求或操作。它创建一个 AbortController 实例，通过该实例的 abort() 方法来触发取消操作，同时通过 signal 属性暴露对应的 AbortSignal 对象供异步操作监听。
- AbortSignal
- AbortSignal 是一个可读的信号对象，表示中止操作的状态。它由 AbortController 创建，通过 listen onabort 事件处理器或其自带的 abort 事件来响应取消请求。AbortSignal 实现了 EventTarget 接口，可以注册多个事件监听器。它还提供了 onabort 属性和 aborted 属性用于检查当前取消状态。
- AbortError
- AbortError 是当使用 AbortSignal 中止 fetch 请求或其他异步操作时抛出的 DOMException。它的 name 属性值为 "AbortError"，message 通常为 "The operation was aborted"。在 catch 块中需要通过检查 error.name 来区分 AbortError 和其他类型的错误。
- 竞态条件 (Race Condition)
- 竞态条件是指多个异步操作的完成顺序不确定，导致最终结果取决于执行的时序。在数据获取场景中，如果用户快速切换筛选条件，旧请求可能晚于新请求返回，导致展示的数据与当前筛选条件不匹配。使用 AbortController 取消旧请求可以有效解决这一问题。
- 防抖 (Debounce)
- fetch API
- fetch 是现代浏览器提供的网络请求 API，返回 Promise 对象。它是 XMLHttpRequest 的替代方案，提供了更简洁的接口和更强大的功能。fetch 支持 AbortSignal，通过 signal 选项传入即可实现请求取消功能。
- Promise.race
- Promise.race 方法接收一个 Promise 数组，返回第一个完成（无论成功或失败）的结果。与 AbortController 配合使用时，可以将 fetch 请求的 Promise 和超时 Promise 放入 race 中，实现超时控制功能。当超时先完成时，fetch 会被自动取消。
- 内存泄漏 (Memory Leak)
- 内存泄漏是指程序动态分配的内存由于某种原因未被释放，导致可用内存逐渐减少。在前端开发中，未取消的异步操作、未移除的事件监听器、未清理的定时器等都是常见的内存泄漏来源。正确使用 AbortController 可以有效防止因未完成请求导致的内存泄漏。
- 生命周期管理
- 生命周期管理是指在组件或对象的整个存在期间正确管理资源的创建和销毁。在 React 或 Vue 中，组件卸载时应清理所有副作用，包括取消未完成的网络请求。AbortController 提供了优雅的清理机制，在卸载时调用 abort() 即可取消所有关联的异步操作。
- 事件监听器 (Event Listener)
- 事件监听器是用于响应特定事件的回调函数。AbortSignal 通过 addEventListener 方法注册 abort 事件的监听器。当 abort() 被调用时，所有注册的监听器都会被触发。正确管理事件监听器的注册和移除是避免内存泄漏的关键。
防抖是一种控制函数执行频率的策略。它在连续触发事件时只执行最后一次。在搜索场景中，防抖可以避免每次按键都发送请求，而是等待用户停止输入一段时间后才发送。结合 AbortController 可以进一步取消未完成的旧请求。