axios vs fetch: 全面对比

2023-03-07 08:27:53

axios vs fetch：深入比较 JavaScript HTTP 请求库

前言

在现代 JavaScript 应用中，HTTP 请求至关重要。有许多库可以简化 HTTP 请求，其中 axios 和 fetch 是最受欢迎的两个选择。本文将深入比较这两个库，分析它们的语法、功能、用法、性能和适用场景，帮助你根据具体需求做出明智的选择。

语法：简洁 vs 繁琐

axios 以其简洁的语法而著称。它提供了高级 API，让你轻松发送 HTTP 请求。发送 GET 请求的代码示例如下：

axios.get('https://example.com/api/v1/users').then(res => console.log(res.data)).catch(err => console.error(err));

相比之下，fetch 的语法更底层，需要手动处理请求和响应。以下示例演示了如何使用 fetch 发送 GET 请求：

fetch('https://example.com/api/v1/users').then(res => {
  if (res.ok) {
    return res.json();
  } else {
    throw new Error('Error: ' + res.status);
  }
}).then(data => console.log(data)).catch(err => console.error(err));

功能：丰富 vs 基础

axios 提供了丰富的功能，包括：

请求/响应拦截器： 在请求和响应发送前修改它们
超时设置： 指定请求超时时间
自动重试： 在请求失败时自动重试
取消请求： 在请求完成前取消
错误处理： 统一处理请求和响应中的错误

fetch 缺乏这些内置功能，需要自己实现。

用法：简单 vs 复杂

axios 的使用方式非常简单直观。以下示例展示了如何使用 axios 发送 POST 请求：

axios.post('https://example.com/api/v1/users', { name: 'John Doe', email: 'johndoe@example.com' }).then(res => console.log(res.data)).catch(err => console.error(err));

fetch 的用法则复杂一些，需要手动处理请求和响应。以下示例演示了如何使用 fetch 发送 POST 请求：

fetch('https://example.com/api/v1/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'John Doe', email: 'johndoe@example.com' })
}).then(res => {
  if (res.ok) {
    return res.json();
  } else {
    throw new Error('Error: ' + res.status);
  }
}).then(data => console.log(data)).catch(err => console.error(err));