AbortController 可用于中止文件分片上传，需创建单个实例并将其 signal 统一传入所有 fetch 请求；调用 abort() 即可终止全部关联请求，但需配合服务端清理临时分片。
AbortController 可以用来中止正在进行的文件分片上传任务，关键在于把每个分片的 fetch 请求与同一个 AbortSignal 关联，并在需要时调用 abort()。
创建 AbortController 并传入 fetch 选项
每次发起分片上传请求时，在 fetch 的 signal 选项中传入 controller.signal。这样一旦调用 controller.abort()，所有已绑定该 signal 的请求都会被中止：
const controller = new AbortController();
const { signal } = controller;
// 上传第 i 个分片
fetch('/upload', {
method: 'POST',
body: chunkBlob,
signal, // ? 绑定中止信号
});
统一管理多个分片请求的中止逻辑
分片上传通常是循环或 Promise.all 批量发起的，需确保所有请求共享同一个 signal，而不是每个分片新建一个 AbortController：
- ✅ 正确：单个 controller 创建一次，所有 fetch 共享它的 signal
- ❌ 错误：每个分片 new AbortController() —— 中止一个不影响其他请求
例如使用 for...of 顺序上传时：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
const controller = new AbortController();
const chunks = splitFileIntoChunks(file, CHUNK_SIZE);
for (const [index, chunk] of chunks.entries()) {
try {
await fetch('/upload', {
method: 'POST',
body: chunk,
headers: { 'X-Chunk-Index': String(index) },
signal: controller.signal, // 所有请求响应同一中止信号
});
} catch (err) {
if (err.name === 'AbortError') {
console.log('上传已取消');
break;
}
throw err;
}
}
提供外部取消能力（如用户点击“取消”按钮）
把 controller 实例暴露给 UI 控制层，比如绑定到按钮点击事件：
let uploadController = null;
function startUpload(file) {
uploadController = new AbortController();
// ... 启动分片上传（使用 uploadController.signal）
}
function cancelUpload() {
if (uploadController) {
uploadController.abort(); // ? 立即中止所有关联请求
uploadController = null;
}
}
// HTML 按钮：<button onclick="cancelUpload()">取消上传</button>
注意浏览器兼容性与服务端配合
AbortController 中止的是客户端请求，不会自动通知服务端清理临时分片：
- fetch 被 abort 后，请求可能仍在服务端处理（尤其网络延迟高时），需服务端有超时或校验机制
- 建议上传前先请求预签名或上传 ID，取消时额外调用
/abort?id=xxx清理服务端状态 - 主流浏览器均支持 AbortController（Chrome 66+、Firefox 57+、Safari 12.1+）
