Fetch API 深入

fetch 不只是 await fetch(url).json()——它支持流式读取、请求取消、拦截器封装。

学完本章你将： 掌握 fetch 请求/响应高级用法、AbortController、流式读取。

AbortController —— 取消请求

javascript

const controller = new AbortController();

fetch("https://slow.example.com/data", {
    signal: controller.signal,
});

// 3 秒后取消
setTimeout(() => controller.abort(), 3000);

// 处理取消
try {
    const resp = await fetch(url, { signal: controller.signal });
} catch (err) {
    if (err.name === "AbortError") {
        console.log("请求已取消");
    }
}

拦截器封装

javascript

async function fetchWithInterceptors(url, options = {}) {
    // 请求拦截
    options.headers = {
        ...options.headers,
        Authorization: `Bearer ${getToken()}`,
        "X-Request-Id": crypto.randomUUID(),
    };

    const resp = await fetch(url, options);

    // 响应拦截
    if (resp.status === 401) redirectToLogin();
    if (!resp.ok) throw new Error(`HTTP ${resp.status}`);

    return resp;
}

流式读取

javascript

const response = await fetch("https://example.com/large-file");
const reader = response.body.getReader();

while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    console.log(`收到 ${value.length} 字节`);
}

Fetch API 深入

Fetch API 深入

AbortController —— 取消请求

拦截器封装

流式读取

🛠️ 学完试试这些工具