Fetch API 请求中断机制
在实际开发中,我们常需要控制网络请求的生命周期。Fetch API 提供了 AbortController 和 AbortSignal 来支持中断请求。调用 abortController.abort() 会立即终止所有关联的网络传输,这对于取消大型文件下载或处理用户快速切换场景非常有用。
需要注意的是,中断进行中的 fetch() 请求会导致 Promise 被拒绝(reject),通常伴随一个 AbortError。下面是一个典型的用法示例:
let abortController = new AbortController();
fetch('wikipedia.zip', { signal: abortController.signal })
.catch(() => console.log('aborted!'));
// 10 毫秒后主动中断请求
setTimeout(() => abortController.abort(), 10);
这段代码展示了如何创建一个控制器,将其信号传递给 fetch,并在指定时间后触发中止。一旦触发,Promise 链会进入 catch 分支。
Headers 对象详解
除了请求控制,HTTP 头部的管理也是 Fetch API 的核心部分。Headers 对象是所有外发请求和入站响应头部的容器。
每个外发的 Request 实例都包含一个空的 Headers 实例,可以通过 Request.prototype.headers 访问;同样,每个入站的 Response 实例也通过 Response.prototype.headers 提供响应头部。这两个属性都是可修改的。
此外,我们也可以直接使用 new Headers() 创建一个新的实例。
Headers 与 Map 的相似性
如果你熟悉 JavaScript 的 Map 对象,会发现 Headers 与之极为相似。这很合理,因为 HTTP 头部本质上是序列化后的键/值对,而 Headers 就是它们在 JS 中的中间接口。
两者都拥有 get()、set()、has() 和 delete() 等实例方法。看下面的对比代码:
let h = new Headers();
let m = new Map();
// 设置键
h.set('foo', );
m.(, );
.(h.());
.(m.());
.(h.());
.(m.());
.(h.());
.(m.());
h.(, );
m.(, );
.(h.());
.(m.());
h.();
m.();
.(h.());
.(m.());

