API 请求处理：Fetch vs Axios 对比解析

处理API请求是现代前端开发中的核心技术，主要涉及异步操作。以下从fetch和axios两种常见方式进行解析，包含代码示例和比较分析。

1. Fetch API的基本使用方法

Fetch是一种基于Promise的原生浏览器API。通过发起HTTP请求实现数据获取，需手动处理响应状态和JSON解析。

• GET请求示例：

  fetch('https://api.example.com/data')
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response failed: ' + response.status);
      }
      return response.json(); // 手动将响应解析为JSON
    })
    .then(data => console.log('Fetch成功:', data))
    .catch(error => console.error('Fetch错误:', error));
  

• POST请求示例（包含JSON数据和配置项）：

  fetch('https://api.example.com/submit', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json', // 需显式设置头部
    },
    body: JSON.stringify({ name: 'Tom', age: 28 }), // 数据对象转为JSON字符串
  })
  .then(response => response.json())
  .then(data => console.log('POST响应:', data))
  .catch(error => console.error('POST错误:', error));
  

• 核心特点：

  • 原生支持现代浏览器。
  • 默认不处理非200状态码的错误（需手动检查response.ok）。
  • 需手工解析响应体（如.json()）。

2. Axios库的使用方法

Axios是基于Promise的第三方HTTP库，简化请求流程并提供丰富特性。

• 基本安装和GET请求示例：

  npm install axios # 需先安装
  

  import axios from 'axios';
  
  axios.get('https://api.example.com/data')
    .then(response => console.log('Axios数据:', response.data))
    .catch(error => console.error('Axios错误:', error));
  

• POST请求示例（JSON自动序列化）：

  axios.post('https://api.example.com/submit', { 
    name: 'Jane', 
    age: 30 
  }, {
    headers: {
      'Content-Type': 'application/json', // Axios通常自动设置
    }
  })
  .then(response => console.log('响应数据:', response.data))
  .catch(error => console.error('错误:', error));
  

• 高级功能：

  • 拦截器：用于全局请求配置和错误处理。

    axios.interceptors.request.use(config => {
      config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`; // 自动添加认证头
      return config;
    });
    

  • 跨平台支持：浏览器和Node.js端统一API。

3. fetch与Axios的核心对比

特性	Fetch	Axios
生态系统	原生API	第三方库（需安装）
错误处理	手动（非200状态需检查）	自动捕获（非200触发catch）
JSON数据转换	手动.json()	自动序列化/解析
拦截器	不支持	支持（适用全局处理）
跨平台兼容性	仅浏览器端	浏览器 + Node.js
支持请求取消	无内置支持	支持

4. 最佳实践建议

• 选择场景：
  • 优先Axios用于复杂应用：需自动错误处理、拦截器或多环境项目。
  • 选Fetch用于轻量需求：小型项目或减少依赖的场景（避免额外安装）。
• 通用步骤：
  1. 设置请求URL及HTTP方法（如GET, POST）。
  2. 定义请求头和参数（如token认证）。
  3. 处理异步响应/错误逻辑，基于Promise或async/await。
  4. 使用ES6语法清理资源（如Promise避免回调地狱）。