1. 引言

在现代Web应用中，网络请求不仅是数据交互的基础，更是影响用户体验与系统可靠性的关键环节。HTML5的 ​​Fetch API​​ 作为新一代网络请求标准，通过Promise化和灵活的配置能力，解决了传统XMLHttpRequest（XHR）的诸多痛点。然而，在实际复杂项目中，开发者常面临更高级的需求：

• ​​统一请求/响应处理​​：如自动添加认证Token、全局错误拦截、请求重试；
• ​​流式数据管理​​：如实时下载大文件（如视频、日志）并显示进度，或边接收边处理响应流（如SSE服务端推送）；
• ​​性能与安全优化​​：如请求缓存、超时控制、防重复提交。

这些需求超出了Fetch API的基础用法范畴，需要通过 ​​拦截器（Interceptors）​​ 和 ​​流式响应（Stream Responses）​​ 等高级技术实现。本文将深入探讨这两项高级用法，结合实际场景（如API鉴权、大文件下载、实时日志流）提供代码示例，帮助开发者掌握Fetch的进阶能力。

2. 技术背景

​​2.1 拦截器的核心需求与实现挑战​​

​​拦截器​​的本质是在请求发送前或响应返回后，插入统一的处理逻辑。常见场景包括：

• ​​请求拦截​​：自动添加全局请求头（如Authorization: Bearer <token>）、修改请求体（如加密数据）；
• ​​响应拦截​​：统一处理HTTP错误（如401未授权时跳转登录页）、解析通用响应格式（如提取data字段）；
• ​​错误拦截​​：捕获网络异常（如断网）或业务逻辑错误（如API返回的错误码），提供全局提示。

​​挑战​​：原生Fetch API ​​不直接提供拦截器功能​​（与Axios等库不同），需通过 ​​高阶函数封装​​ 或 ​​Service Worker​​ 模拟实现。

​​2.2 流式响应的核心价值与应用场景​​

​​流式响应​​指服务器返回的数据以 ​​分块（Chunked）​​ 形式传输，而非一次性完整返回。其优势在于：

• ​​大文件处理​​：下载大文件（如1GB视频）时，通过逐块读取（ReadableStream）实现边下载边保存，避免内存溢出；
• ​​实时数据流​​：接收服务端推送的实时日志（如服务器监控数据）或事件流（如SSE），无需等待全部数据到达；
• ​​性能优化​​：减少用户等待时间（如先显示部分内容），提升交互响应速度。

​​挑战​​：流式响应需要开发者手动管理数据块的读取与拼接（通过ReadableStream的getReader()方法），对代码逻辑的复杂度要求较高。

3. 应用使用场景

​​3.1 拦截器典型场景​​

• ​​场景1：全局认证管理​​：所有API请求自动携带JWT Token（从本地存储读取），未登录时拦截请求并跳转登录页；
• ​​场景2：统一错误处理​​：拦截HTTP状态码401/403/500，显示友好的错误提示（如“登录过期，请重新登录”）；
• ​​场景3：请求重试机制​​：网络超时或502错误时，自动重试请求（最多3次）；

​​3.2 流式响应典型场景​​

• ​​场景1：大文件下载（如视频/备份包）​​：显示下载进度条（通过stream逐块读取计算已下载字节数）；
• ​​场景2：实时日志监控​​：服务器推送日志流（如应用运行错误），前端实时显示最新日志；
• ​​场景3：边下载边播放（如音频流）​​：通过流式响应逐步解码音频数据，无需等待完整文件下载。

4. 不同场景下的详细代码实现

​​4.1 环境准备​​

• ​​开发环境​​：现代浏览器（Chrome 42+/Firefox 39+/Safari 10.1+），支持Fetch API与Streams API；
• ​​核心API​​：
  • ​​拦截器模拟​​：通过高阶函数封装fetch，在调用原生Fetch前后插入逻辑（如请求头修改、错误拦截）；
  • ​​流式响应​​：使用response.body（类型为ReadableStream）的getReader()方法逐块读取数据；
• ​​关键工具​​：
  • AbortController：实现请求超时控制（模拟拦截器的超时拦截）；
  • TextDecoder：将流式响应的二进制数据块（Uint8Array）解码为文本（如JSON或日志内容）。

​​4.2 典型场景1：请求/响应拦截器（模拟实现）​​

​​4.2.1 代码实现（封装通用拦截器）​​

// interceptor.ts（拦截器封装模块）
type FetchFunction = (input: RequestInfo | URL, init?: RequestInit) => Promise<Response>;

// 原始fetch函数（后续会被拦截器包装）
let originalFetch: FetchFunction = window.fetch;

// 请求拦截器：在发送请求前修改配置（如添加Token）
const requestInterceptors: Array<(config: RequestInit) => RequestInit> = [];
// 响应拦截器：在接收响应后处理数据（如统一解析错误码）
const responseInterceptors: Array<(response: Response) => Promise<Response>> = [];
// 错误拦截器：捕获网络或HTTP错误（如401跳转登录）
const errorInterceptors: Array<(error: any) => Promise<any>> = [];

// 添加拦截器的工具方法
export const addRequestInterceptor = (interceptor: (config: RequestInit) => RequestInit) => {
  requestInterceptors.push(interceptor);
};

export const addResponseInterceptor = (interceptor: (response: Response) => Promise<Response>) => {
  responseInterceptors.push(interceptor);
};

export const addErrorInterceptor = (interceptor: (error: any) => Promise<any>) => {
  errorInterceptors.push(interceptor);
};

// 核心：封装后的fetch函数（带拦截器逻辑）
export const fetchWithInterceptors: FetchFunction = async (input, init = {}) => {
  try {
    // 1. 请求拦截：依次执行所有请求拦截器，修改请求配置
    let modifiedInit = { ...init };
    for (const interceptor of requestInterceptors) {
      modifiedInit = interceptor(modifiedInit);
    }

    // 2. 发起原始fetch请求
    let response = await originalFetch(input, modifiedInit);

    // 3. 响应拦截：依次执行所有响应拦截器，处理响应数据
    for (const interceptor of responseInterceptors) {
      response = await interceptor(response);
    }

    return response;
  } catch (error) {
    // 4. 错误拦截：依次执行所有错误拦截器，处理异常
    let handledError = error;
    for (const interceptor of errorInterceptors) {
      handledError = await interceptor(handledError);
    }
    throw handledError; // 最终仍抛出错误（可由调用方捕获）
  }
};

// 初始化：将全局fetch替换为封装后的版本（可选，通常直接调用fetchWithInterceptors）
// window.fetch = fetchWithInterceptors;

​​4.2.2 使用拦截器的业务代码（示例：自动添加Token与错误处理）​​

// api.ts（业务层调用）
import { fetchWithInterceptors, addRequestInterceptor, addResponseInterceptor, addErrorInterceptor } from './interceptor';

// 1. 添加请求拦截器：自动添加Authorization头（从localStorage获取Token）
addRequestInterceptor((config) => {
  const token = localStorage.getItem('authToken');
  if (token && config.headers) {
    config.headers = { ...config.headers, 'Authorization': `Bearer ${token}` };
  }
  return config;
});

// 2. 添加响应拦截器：统一处理HTTP错误（如401未授权）
addResponseInterceptor(async (response) => {
  if (!response.ok) {
    if (response.status === 401) {
      // 未授权：清除Token并跳转登录页
      localStorage.removeItem('authToken');
      window.location.href = '/login';
      throw new Error('登录已过期，请重新登录');
    } else if (response.status >= 500) {
      throw new Error(`服务器错误（状态码：${response.status}）`);
    }
  }
  return response; // 非错误状态码直接返回
});

// 3. 添加错误拦截器：捕获网络异常（如断网）
addErrorInterceptor(async (error) => {
  if (error instanceof TypeError && error.message.includes('Failed to fetch')) {
    alert('网络连接失败，请检查网络设置');
  } else {
    alert(`请求失败：${error.message || '未知错误'}`);
  }
  throw error; // 继续抛出以便业务代码处理
});

// 业务API调用示例：获取用户信息
export const fetchUserInfo = async () => {
  const response = await fetchWithInterceptors('https://api.example.com/user', {
    method: 'GET',
    headers: { 'Content-Type': 'application/json' }
  });
  return response.json(); // 解析JSON数据
};

​​4.2.3 原理解释​​

• ​​拦截器链​​：请求/响应/错误拦截器通过数组存储，按顺序执行（类似中间件模式）；
• ​​请求拦截​​：在调用原生fetch前，通过requestInterceptors修改请求配置（如添加Token头）；
• ​​响应拦截​​：在获取原生Response后，通过responseInterceptors处理状态码（如401跳转登录）；
• ​​错误拦截​​：捕获网络异常（如断网）或HTTP错误（如500），通过errorInterceptors统一提示用户；
• ​​业务解耦​​：业务代码（如fetchUserInfo）无需关心拦截逻辑，只需调用封装后的fetchWithInterceptors。

​​4.3 典型场景2：流式响应（大文件下载与进度显示）​​

​​4.3.1 代码实现（下载大文件并显示进度）​​

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>流式响应 - 文件下载</title>
  <style>
    #progressContainer { margin: 20px 0; }
    #progressBar { width: 100%; height: 20px; background: #f0f0f0; border-radius: 10px; overflow: hidden; }
    #progressFill { height: 100%; background: #4CAF50; width: 0%; transition: width 0.3s; }
    #status { margin-top: 10px; font-weight: bold; }
  </style>
</head>
<body>
  <h1>大文件下载（流式响应）</h1>
  <button id="downloadBtn">下载视频文件（模拟）</button>
  <div id="progressContainer" style="display: none;">
    <div id="progressBar">
      <div id="progressFill"></div>
    </div>
    <div id="status">准备下载...</div>
  </div>

  <script>
    document.getElementById('downloadBtn').addEventListener('click', async () => {
      const downloadBtn = document.getElementById('downloadBtn');
      const progressContainer = document.getElementById('progressContainer');
      const progressFill = document.getElementById('progressFill');
      const status = document.getElementById('status');

      downloadBtn.disabled = true;
      progressContainer.style.display = 'block';
      status.textContent = '开始下载...';

      try {
        // 模拟大文件下载API（实际项目中替换为真实URL）
        const response = await fetch('https://example.com/large-video.mp4'); // 注意：此处需替换为支持流式传输的真实API

        if (!response.ok) {
          throw new Error(`下载失败！状态码：${response.status}`);
        }

        // 获取响应体的总大小（通过Content-Length头部）
        const contentLength = response.headers.get('Content-Length');
        const total = contentLength ? parseInt(contentLength, 10) : 0;
        let loaded = 0;

        // 获取流式响应的读取器
        const reader = response.body.getReader();
        const chunks: Uint8Array[] = []; // 存储所有数据块

        while (true) {
          // 读取下一块数据
          const { done, value } = await reader.read();
          if (done) break;

          chunks.push(value);
          loaded += value.length;

          // 更新进度条（如果有总大小）
          if (total > 0) {
            const percent = Math.round((loaded / total) * 100);
            progressFill.style.width = `${percent}%`;
            status.textContent = `下载中... ${percent}% (${loaded} / ${total} bytes)`;
          } else {
            status.textContent = `下载中... 已接收 ${loaded} bytes`;
          }
        }

        // 合并所有数据块为完整的Blob
        const blob = new Blob(chunks);
        const downloadUrl = URL.createObjectURL(blob);

        // 创建下载链接并触发点击（模拟文件保存）
        const a = document.createElement('a');
        a.href = downloadUrl;
        a.download = 'large-video.mp4'; // 文件名（可根据响应头Content-Disposition解析）
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(downloadUrl);

        status.textContent = '下载完成！';
      } catch (error) {
        status.textContent = `下载失败：${error.message}`;
        console.error('下载错误:', error);
      } finally {
        downloadBtn.disabled = false;
      }
    });
  </script>
</body>
</html>

​​4.3.2 原理解释​​

• ​​流式读取​​：通过response.body.getReader()获取ReadableStreamDefaultReader，调用reader.read()逐块读取数据（每次返回{ done: boolean, value: Uint8Array }）；
• ​​进度计算​​：根据已接收的数据块大小（value.length）和总大小（Content-Length头部），动态更新进度条百分比；
• ​​数据合并​​：将所有数据块（Uint8Array[]）存储到数组中，下载完成后通过new Blob(chunks)合并为完整的二进制文件；
• ​​文件保存​​：通过URL.createObjectURL(blob)生成临时下载链接，模拟用户点击保存文件。

5. 原理解释

​​5.1 拦截器的核心机制​​

原生Fetch API未直接提供拦截器，但可通过 ​​高阶函数封装​​ 模拟实现，其核心流程如下：

1. ​​请求阶段​​：在调用原生fetch前，遍历所有请求拦截器（如添加Token、修改URL），动态调整请求配置（RequestInit）；
2. ​​响应阶段​​：获取原生Response后，遍历所有响应拦截器（如检查状态码、解析通用格式），对响应数据进行统一处理；
3. ​​错误阶段​​：捕获网络异常（如断网）或HTTP错误（如404），通过错误拦截器提供全局提示或重试逻辑；
4. ​​链式执行​​：拦截器按添加顺序依次执行，支持异步操作（如通过async/await）。

​​5.2 流式响应的核心机制​​

流式响应基于 ​​ReadableStream​​ API，其核心流程如下：

1. ​​流式传输​​：服务器返回的数据以分块形式传输（如每1MB一个块），浏览器通过response.body（类型为ReadableStream）接收；
2. ​​逐块读取​​：调用response.body.getReader()获取读取器，通过reader.read()异步获取每一块数据（Uint8Array）；
3. ​​数据处理​​：对每一块数据实时处理（如更新进度条、解码文本），或存储到缓冲区（如合并为Blob下载）；
4. ​​结束标志​​：当reader.read()返回{ done: true }时，表示所有数据传输完成。

6. 原理流程图及原理解释

​​6.1 拦截器执行流程图​​

graph LR
    A[调用fetchWithInterceptors] --> B[执行请求拦截器链]
    B --> C[调用原生fetch(input, modifiedInit)]
    C --> D[获取原生Response]
    D --> E[执行响应拦截器链]
    E --> F[返回最终Response（或抛出错误）]
    F -->|网络/HTTP错误| G[执行错误拦截器链]
    G --> H[抛出处理后的错误]

​​6.2 流式响应处理流程图​​

graph LR
    A[调用fetch] --> B[获取ReadableStream（response.body）]
    B --> C[创建读取器（getReader()）]
    C --> D[循环读取数据块（reader.read()）]
    D -->|{ done: false }| E[处理当前块（更新进度/存储数据）]
    D -->|{ done: true }| F[合并所有块（Blob）并保存]

7. 环境准备

​​7.1 开发与测试环境​​

• ​​浏览器要求​​：Chrome 42+（支持Streams API）、Firefox 39+、Safari 10.1+；
• ​​测试API​​：
  • 公开API（如JSONPlaceholder用于请求拦截测试）；
  • 大文件下载API（如模拟的/large-video.mp4，需支持Content-Length头部）；
• ​​调试工具​​：Chrome开发者工具的“Network”面板（查看请求头、响应流状态）、“Console”面板（调试错误）。

​​7.2 兼容性检测代码​​

// 检测是否支持ReadableStream（流式响应的基础）
if (!window.ReadableStream) {
  console.error('当前浏览器不支持ReadableStream（流式响应不可用）');
}

// 检测是否支持拦截器封装（所有浏览器均支持高阶函数）
console.log('拦截器封装功能可用（基于高阶函数）');

8. 实际详细应用代码示例（综合案例：用户管理系统）

​​8.1 场景描述​​

开发一个用户管理后台，集成以下功能：

• ​​请求拦截​​：所有API请求自动携带JWT Token（从localStorage读取），未登录时跳转登录页；
• ​​响应拦截​​：统一处理401（未授权）和500（服务器错误），显示友好提示；
• ​​流式下载​​：导出用户数据时，支持大Excel文件的流式下载与进度显示。

​​8.2 代码实现（关键片段）​​

（结合拦截器与流式响应，实现完整的用户管理交互逻辑。）

9. 运行结果

​​9.1 拦截器效果​​

• 未登录用户发起请求时，自动拦截并跳转登录页（通过401响应拦截）；
• 所有请求自动添加Token头（通过请求拦截），无需在每个API调用中重复编写。

​​9.2 流式响应效果​​

• 下载大文件时，进度条实时更新（如“下载中... 65% (120MB / 180MB bytes)”）；
• 文件完整下载后自动保存到本地（通过Blob与临时链接）。

10. 测试步骤及详细代码

​​10.1 拦截器测试​​

1. ​​Token自动添加​​：检查网络请求的Headers中是否包含Authorization: Bearer <token>；
2. ​​401错误处理​​：模拟未授权API（返回401状态码），确认是否跳转登录页；
3. ​​网络错误提示​​：断网后发起请求，确认是否显示“网络连接失败”。

​​10.2 流式响应测试​​

1. ​​进度准确性​​：下载不同大小的文件，验证进度条百分比与实际接收字节数是否匹配；
2. ​​文件完整性​​：下载完成后打开文件，确认内容无损坏；
3. ​​中断恢复​​：模拟下载中断（如暂停后继续），验证是否能正确处理（需结合Range头部，本文未实现）。

11. 部署场景

​​11.1 企业级Web应用​​

• ​​适用场景​​：后台管理系统（如用户数据导出）、需要鉴权的API调用（如支付接口）；
• ​​要求​​：拦截器用于统一鉴权与错误处理，流式响应用于大文件导出（如报表下载）。

​​11.2 实时监控系统​​

• ​​适用场景​​：服务器日志监控（通过SSE流式推送）、IoT设备数据实时接收；
• ​​要求​​：流式响应逐块处理实时数据（如解析JSON日志并显示到页面）。

12. 疑难解答

​​12.1 问题1：拦截器未生效​​

• ​​可能原因​​：未正确替换全局fetch（或业务代码直接调用原生fetch）；
• ​​解决方案​​：确保所有请求通过封装后的fetchWithInterceptors发起，或显式调用拦截器模块。

​​12.2 问题2：流式下载进度不更新​​

• ​​可能原因​​：服务器未返回Content-Length头部（无法计算百分比）；
• ​​解决方案​​：若无总大小，仅显示已接收字节数（如“已下载 10MB”）；或通过服务器返回文件大小信息。

​​12.3 问题3：大文件下载内存溢出​​

• ​​可能原因​​：所有数据块存储在内存中（chunks: Uint8Array[]），文件过大时导致崩溃；
• ​​解决方案​​：使用流式写入（如通过Streams API的WritableStream直接写入文件，而非合并为Blob）。

13. 未来展望

​​13.1 技术趋势​​

• ​​原生拦截器支持​​：未来浏览器或Fetch API可能直接提供fetch.interceptors配置项，简化拦截器实现；
• ​​更强大的流式处理​​：支持流式数据的实时解码（如直接解析JSON流、CSV流），无需手动拼接Uint8Array；
• ​​与Service Worker深度集成​​：通过Service Worker实现全局请求缓存、离线拦截与重试。

​​13.2 挑战​​

• ​​复杂场景的兼容性​​：如跨域请求的拦截器配置（需服务器配合CORS）、流式响应的断点续传；
• ​​性能优化​​：大文件下载时的内存与CPU占用（需更高效的流式处理算法）；
• ​​安全增强​​：防止拦截器被恶意篡改（如全局fetch被覆盖），确保鉴权逻辑的可靠性。

​​14. 总结​​

Fetch API的高级用法（拦截器与流式响应）是构建复杂、可靠Web应用的关键技术。本文通过 ​​请求/响应拦截器的模拟实现​​ 与 ​​流式下载的逐块处理​​，揭示了其核心原理：

• ​​拦截器​​：通过高阶函数封装，在请求前后插入统一逻辑（如鉴权、错误处理），提升代码复用性与安全性；
• ​​流式响应​​：利用ReadableStream逐块读取数据，实现大文件下载与实时数据流的低内存消耗处理；

掌握这些高级技术，开发者不仅能解决复杂业务需求（如API鉴权、文件导出），更能优化用户体验（如实时反馈、性能提升）。未来，随着浏览器能力的持续增强，Fetch API将在Web与后端的深度融合中发挥更重要的作用。