前端HTTP请求：Fetch api和Axios

当我们谈论起网络请求，总绕不开两个老朋友：Fetch API 和 Axios。一个出身名门，是浏览器的原生API；另一个则是久经沙场，功能强大的第三方库。二者都是两种常用的 HTTP 请求方式，各有其独特的优势和适用场景。

第一回合：自我介绍

首先，让我们来认识一下它们。

Fetch API 是浏览器原生提供的网络请求接口，基于 Promise，它的目标是取代传统的 XMLHttpRequest。由于是原生能力，你不需要安装任何依赖，开箱即用，这在追求轻量化的项目中非常诱人。

Axios 则是前端社区中的明星，一个基于 Promise 的 HTTP 客户端。它不依赖于任何框架，可以在浏览器和 Node.js 环境下使用。Axios 强大的功能和友好的 API 设计，让它成为了许多大型项目中的首选。

第二回合：核心功能大比拼

我们通过几个具体的场景来对比它们的核心功能。

1. 语法：谁更简洁？

让我们以一个简单的 GET 请求为例，看看两者的代码。

使用 Fetch API 获取数据：

JavaScript 复制代码

fetch('https://api.example.com/users')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('出错了：', error));

而使用 Axios，代码则简洁得多：

JavaScript 复制代码

axios.get('https://api.example.com/users')
  .then(response => console.log(response.data))
  .catch(error => console.error('出错了：', error));

你会发现，Axios 自动帮我们完成了 JSON 数据的解析，我们不需要再调用 response.json() 这一步，直接通过 response.data 就能拿到数据。

2. 错误处理：谁更靠谱？

这是 Fetch API 最常被吐槽的一个"陷阱"。它只会对网络错误 （比如断网）触发 catch，而对于HTTP 状态码错误 （比如 404 Not Found 或 500 Internal Server Error），它会认为这是一个成功的请求，并进入 then 方法。你需要在 then 中手动判断 response.ok 或 response.status 来处理。

JavaScript 复制代码

fetch('https://api.example.com/not-found')
  .then(response => {
    // 即使是 404，也会进入这里
    if (!response.ok) {
      throw new Error(`HTTP 错误！状态码: ${response.status}`);
    }
    return response.json();
  })
  .catch(error => console.error('出错了：', error));

而 Axios 则不会有这个烦恼。它会智能地判断响应状态码，只要状态码不在 2xx 的范围内，它就会自动将请求视为失败，并直接进入 catch 块。

JavaScript 复制代码

axios.get('https://api.example.com/not-found')
  .then(response => console.log(response.data))
  .catch(error => {
    // 404 错误会直接进入这里
    if (error.response) {
      console.error('HTTP 错误，状态码：', error.response.status);
    }
  });

这种统一的错误处理机制，大大简化了我们的开发逻辑。

3. 请求/响应拦截器：谁更强大？

在实际项目中，我们经常需要在每次请求中带上 Token 来验证身份，或者在收到响应时统一处理错误码或展示加载动画。

Fetch API 原生不支持拦截器，你需要自己封装一个高阶函数或者在每个请求前手动添加 headers，这会造成大量重复代码。

JavaScript 复制代码

const myFetch = (url, options = {}) => {
  options.headers = {
    ...options.headers,
    'Authorization': `Bearer ${localStorage.getItem('token')}`
  };
  return fetch(url, options);
};

myFetch('https://api.example.com/profile')
  .then(response => response.json());

Axios 则内置了强大的拦截器（Interceptors） 功能。它允许你在请求发送前和响应返回后，对数据进行统一处理。

JavaScript 复制代码

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

// 响应拦截器
axios.interceptors.response.use(response => {
  // 可以统一处理成功响应
  return response;
}, error => {
  // 可以统一处理错误，比如根据状态码跳转到登录页
  if (error.response.status === 401) {
    console.log('Token过期，请重新登录！');
  }
  return Promise.reject(error);
});

// 现在，所有通过 axios 发出的请求都会自动带上 Token
axios.get('https://api.example.com/profile');

这样的设计，让代码的可维护性 和可扩展性得到了极大提升。

第三回合：生产环境中的抉择

经过前面的对比，我们可以清晰地看到它们的优劣势。

Fetch API 的优势在于：

轻量化： 无需额外安装依赖，减小了最终打包的体积，这在对包大小有严格要求的场景下很有优势。
原生支持： 现代浏览器都已支持，兼容性良好。

Axios 的优势在于：

功能全面： 除了上面提到的拦截器，它还支持请求取消、请求超时、上传文件进度条、以及更友好的并发请求等高级功能。
统一体验： 在浏览器和 Node.js 中都提供了相同的 API，这对于全栈开发者来说非常方便。
社区支持： 社区活跃，遇到问题很容易找到解决方案。

那么，我们该如何选择？

如果你在开发一个轻量级的个人项目、静态网站，或者对包体积有苛刻要求 ，并且你的请求逻辑相对简单，那么 Fetch API 绝对是你的首选。它的原生特性让你告别额外依赖，代码也足够简洁。
但如果你在开发一个中大型项目 ，需要处理复杂的认证、统一的错误提示、全局的加载动画，或者需要经常取消请求，那么 Axios 几乎是唯一的选择。它的拦截器机制、统一的错误处理以及丰富的功能，可以让你用最少的代码实现最多的功能，极大地提高开发效率。

小结：没有最好，只有最合适

总的来说，Fetch API 是一个功能精简、性能优秀的浏览器原生API，而 Axios 是一个功能强大、易于使用的第三方库。

官方资料：使用 Fetch

Axios中文文档 | Axios中文网