Axios时代已终结？fetch + AbortController 完美逆袭的实战指南

告别第三方依赖，浏览器原生API现已具备所有关键能力

前言：一个时代的变迁

多年来，Axios几乎统治了JavaScript的HTTP请求领域。它简洁的API、强大的功能（如拦截器、请求取消）和优秀的浏览器兼容性，让它成为了无数开发者的首选。但时代在变，浏览器原生功能也在不断进化——曾经让我们依赖Axios的核心痛点，如今已被完美解决。

为什么我们曾经深爱Axios？

在探讨新技术之前，我们需要承认Axios的历史贡献。它解决了原生XMLHttpRequest的许多痛点（尤其是回调地狱问题），并提供了早期fetch API所不具备的关键功能：

• 请求取消机制：避免不必要的网络请求
• 超时控制：自动处理响应超时
• 进度监控：上传下载进度追踪
• 拦截器：全局请求/响应处理
• 自动JSON转换：无需手动处理响应数据

这些优点让Axios成为了事实上的标准，但fetch API并没有停滞不前。

fetch的原生优势：轻装上阵

fetch是浏览器内置的、基于Promise的现代HTTP请求标准。它的核心优势在于：

1. 零依赖：无需npm install，没有额外的包体积
2. 原生集成：与Service Workers、Cache API等现代浏览器API无缝集成
3. 更底层、更灵活：直接操作Request和Response对象
4. 未来证明：随着浏览器发展自动获得性能和安全改进

然而，长期以来，fetch最大的短板就是没有内置的请求取消或超时机制，这也是许多开发者选择Axios的决定性因素。

AbortController：补齐最后一块拼图

AbortController虽然不是全新API，但它的普及和与fetch的结合，彻底改变了游戏规则。这个Web API完美补足了fetch的功能缺口。

AbortController工作原理

AbortController的工作原理非常简单：

1. 创建一个AbortController实例
2. 从实例中获取一个signal对象
3. 将这个signal作为fetch请求的配置项传入
4. 在需要时调用controller.abort()方法

一旦abort()被调用，与该signal关联的fetch请求就会立即中止，并且Promise会被reject，抛出AbortError。

实战对比：Axios vs fetch + AbortController

1. 实现请求取消

场景：用户在搜索框中快速输入，每次输入都触发请求，但我们只关心最后一次请求的结果。

Axios实现：

let cancelTokenSource;

async function handleSearch(query) {
  // 取消上一个请求
  if (cancelTokenSource) {
    cancelTokenSource.cancel('Operation canceled due to new request.');
  }
  
  // 创建新的取消令牌
  cancelTokenSource = axios.CancelToken.source();
  
  try {
    const response = await axios.get(`/api/search?q=${query}`, {
      cancelToken: cancelTokenSource.token
    });
    console.log('Search results:', response.data);
  } catch (error) {
    if (axios.isCancel(error)) {
      console.log('Request canceled:', error.message);
    } else {
      console.error('Request error:', error);
    }
  }
}

fetch + AbortController实现：

let controller;

async function handleSearch(query) {
  // 如果上一个请求正在进行，取消它
  if (controller) {
    controller.abort();
  }

  // 为新请求创建一个新的控制器
  controller = new AbortController();
  const signal = controller.signal;

  try {
    const response = await fetch(`/api/search?q=${query}`, { signal });
    const data = await response.json();
    console.log('Search results:', data);
  } catch (error) {
    if (error.name === 'AbortError') {
      console.log('Fetch aborted');
    } else {
      console.error('Fetch error:', error);
    }
  }
}

2. 实现请求超时

Axios实现：

axios.get('/api/data', {
  timeout: 5000 // 5秒超时
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  if (error.code === 'ECONNABORTED') {
    console.log('请求超时');
  } else {
    console.error('其他错误', error);
  }
});

fetch + AbortController实现：

// 方法一：使用setTimeout + AbortController
const controller = new AbortController();
const signal = controller.signal;

// 设置超时
const timeoutId = setTimeout(() => {
  controller.abort();
}, 5000);

fetch('/api/data', { signal })
  .then(response => response.json())
  .then(data => {
    clearTimeout(timeoutId);
    console.log(data);
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('请求超时');
    } else {
      console.error('其他错误', error);
    }
  });

// 方法二：使用较新浏览器支持的AbortSignal.timeout()
fetch('/api/data', { 
  signal: AbortSignal.timeout(5000) 
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('请求超时');
    } else {
      console.error('其他错误', error);
    }
  });

3. 实现拦截器功能

Axios实现：

// 请求拦截器
axios.interceptors.request.use(
  config => {
    config.headers.Authorization = `Bearer ${getToken()}`;
    return config;
  },
  error => Promise.reject(error)
);

// 响应拦截器
axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      redirectToLogin();
    }
    return Promise.reject(error);
  }
);

fetch实现：

// 创建自定义fetch包装器
async function customFetch(url, options = {}) {
  // 请求拦截
  const headers = new Headers(options.headers || {});
  headers.set('Authorization', `Bearer ${getToken()}`);
  
  const response = await fetch(url, {
    ...options,
    headers
  });
  
  // 响应拦截
  if (response.status === 401) {
    redirectToLogin();
    throw new Error('未授权');
  }
  
  return response;
}

// 使用自定义fetch
customFetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data));

进阶用法：封装增强型fetch

为了获得更好的开发体验，我们可以封装一个增强型的fetch工具：

class FetchClient {
  constructor(baseURL = '') {
    this.baseURL = baseURL;
    this.interceptors = {
      request: [],
      response: []
    };
  }

  // 添加拦截器
  useRequestInterceptor(interceptor) {
    this.interceptors.request.push(interceptor);
  }

  useResponseInterceptor(interceptor) {
    this.interceptors.response.push(interceptor);
  }

  // 执行请求
  async request(url, options = {}) {
    let requestOptions = { 
      ...options, 
      headers: new Headers(options.headers || {}) 
    };

    // 应用请求拦截器
    for (const interceptor of this.interceptors.request) {
      requestOptions = await interceptor(requestOptions);
    }

    // 添加超时支持
    const controller = new AbortController();
    requestOptions.signal = controller.signal;
    
    const timeoutId = setTimeout(() => {
      controller.abort();
    }, options.timeout || 10000);

    try {
      const response = await fetch(`${this.baseURL}${url}`, requestOptions);
      clearTimeout(timeoutId);

      let processedResponse = response;
      
      // 应用响应拦截器
      for (const interceptor of this.interceptors.response) {
        processedResponse = await interceptor(processedResponse);
      }

      return processedResponse;
    } catch (error) {
      clearTimeout(timeoutId);
      throw error;
    }
  }

  // 便捷方法
  get(url, options = {}) {
    return this.request(url, { ...options, method: 'GET' });
  }

  post(url, data, options = {}) {
    const headers = new Headers(options.headers || {});
    headers.set('Content-Type', 'application/json');
    
    return this.request(url, {
      ...options,
      method: 'POST',
      headers,
      body: JSON.stringify(data)
    });
  }

  // 其他HTTP方法...
}

// 使用示例
const api = new FetchClient('/api');

// 添加拦截器
api.useRequestInterceptor(async (options) => {
  options.headers.set('Authorization', `Bearer ${getToken()}`);
  return options;
});

api.useResponseInterceptor(async (response) => {
  if (!response.ok) {
    throw new Error(`HTTP错误: ${response.status}`);
  }
  return response.json(); // 自动解析JSON
});

// 发起请求
api.get('/data')
  .then(data => console.log(data))
  .catch(error => console.error(error));

性能与包体积考量

使用原生fetch + AbortController的最大优势之一是包体积的减少：

对于现代浏览器（Chrome > 66, Firefox > 57, Safari > 11.1, Edge > 16），fetch和AbortController都已得到良好支持。对于需要支持老旧浏览器的项目，可以使用小的polyfill（如abortcontroller-polyfill），总体积仍远小于Axios。

迁移策略

如果你正在考虑从Axios迁移到原生方案，以下是一些建议：

1. 渐进式迁移：先在新功能中使用fetch，逐步替换旧代码
2. 创建兼容层：封装fetch提供类似Axios的API，降低迁移成本
3. 测试浏览器兼容性：确认目标用户使用的浏览器支持这些特性
4. 准备polyfill：为不支持的环境准备后备方案

结论：何时选择哪种方案？

选择Axios的情况：

• 需要支持非常老的浏览器
• 需要上传/下载进度监控
• 项目已深度集成Axios拦截器生态系统
• 团队已熟悉Axios且迁移成本过高

选择fetch + AbortController的情况：

• 面向现代浏览器开发
• 追求最小的包体积和最佳性能
• 希望减少第三方依赖
• 需要与Service Workers等现代API深度集成

对于所有新的、面向现代浏览器的Web项目，fetch + AbortController的组合无疑是更优选。它提供了原生、轻量且功能完整的HTTP请求能力，让我们能够在不牺牲功能的前提下，减少依赖、提升性能。

前端开发的世界在不断演进，今天的最佳实践可能明天就会过时。保持学习，适时重构，选择最适合当前项目需求的技术方案——这才是真正专业的开发之道。

下面是 fetch API 在主流浏览器中的支持概况，数据综合自多个来源，希望能帮你判断是否需要为特定浏览器版本提供备选方案。

🚨 特别注意

• Internet Explorer：完全不支持 fetch API。如果仍需支持IE，必须使用兼容方案。
• 某些高级特性（如表中的 AbortController，或 duplex 等请求参数）在浏览器中的支持时间可能晚于 fetch 基本功能。对于较新的特性，务必查阅更详细的文档并进行针对性测试。

🔧 处理兼容性问题

如果您的项目需要覆盖不支持 fetch 的浏览器（如旧版浏览器或 Internet Explorer），可以考虑以下方案：

1. 使用 Polyfill：

   • 推荐使用 whatwg-fetch Polyfill 库。它旨在为未实现 fetch 标准的浏览器提供支持。
   • 注意：Polyfill 通常只能模拟基本功能，一些高级特性（如 AbortController）可能无法完美实现。

2. 降级方案：

   • 在进行特性检测后，对于不支持 fetch 的环境，可以回退到传统的 XMLHttpRequest（XHR）来实现类似功能。

3. 利用第三方库：

   • 一些现代的 HTTP 请求库（如 Axios）本身会处理浏览器兼容性问题。它们在内部可能使用 fetch 并回退到 XHR。
   • 也有一些库是专门基于 fetch 进行封装并添加兼容性处理的，例如 fetch-dog 或 up-fetch。

✅ 特性检测

在实际项目中，更可靠的做法是进行特性检测，而不是仅依赖浏览器版本。在使用 fetch 或某些高级功能（如 AbortController）之前，最好先检查其是否存在：

// 检测全局是否存在 fetch API
if (window.fetch) {
  // 安全地使用 fetch
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));
} else {
  // 降级方案，例如使用 XMLHttpRequest 或提示用户
  console.log('您的浏览器版本较旧，部分功能可能无法完美支持。');
}

// 如果需要使用 AbortController，也应先检测
if ('AbortController' in window) {
  // 使用 AbortController
  const controller = new AbortController();
  const signal = controller.signal;
  // ... 将 signal 传递给 fetch 选项
} else {
  // 降级处理，例如不使用取消功能或使用其他方式模拟
}

💎 总结

fetch API 如今已得到所有现代浏览器的广泛支持。对于新项目，可以放心使用它的基本功能。

关键在于：

• 明确您的目标用户群体和需要支持的浏览器范围。
• 如果需要支持旧版浏览器（如 IE），务必使用 Polyfill 或提供降级方案。
• 对于较新的高级特性，务必进行特性检测并谨慎使用。