Axios 与 Fetch：您应该为您的项目选择哪一个

介绍

在 Web 开发中，Axios 与 fetch 之间的争论围绕着发出 HTTP 请求，这对于浏览器和服务器之间的通信至关重要。无论您是获取数据、提交表单还是与 API 交互，HTTP 请求都能使 Web 应用程序保持动态。开发人员通常依赖内置浏览器功能 fetch() 或第三方库 Axios。

Axios 和 fetch() 都可以处理常见的 HTTP 请求，例如 GET、POST、PUT 和 DELETE，但具有明显的优势。 Axios 因其简单性和强大的功能而广受欢迎，而 fetch() 是轻量级的，内置于​​浏览器中，避免了外部依赖。

本博客将比较 Axios 与 fetch，通过实际示例突出它们的主要差异、优点和缺点，帮助您为您的项目选择正确的工具。

Axios 和 fetch() 之间的核心区别

在 Axios 与 fetch 之间做出决定时，了解它们的根本差异非常重要，从语法和设置到数据处理和向后兼容性。下面，我们将探讨两者之间的主要对比，以帮助您做出决定。

1. 基本语法和设置

Axios 和 fetch() 之间的主要区别之一是它们语法的简单性。以下是使用这两种方法的简单 HTTP 请求的快速浏览：

Axios 示例：

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

fetch() 示例：

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

在axios中，自动解析响应数据，可以直接访问数据对象。使用fetch()，需要通过调用response.json()手动解析响应，使得axios对于标准操作更加简洁。

2. 数据处理、JSON 解析和简单性

Axios 与 fetch 讨论中的另一个关键区别围绕数据处理：

• 自动 JSON 解析： axios 自动处理 JSON 解析，默认将请求和响应数据都转换为 JSON。这在使用 JSON API 时非常方便，因为它使您无需手动字符串化或解析数据。相比之下，fetch() 需要显式处理解析和字符串化，这使得它稍微冗长一些。

Axios 示例（数据处理）：

  axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'Post Title',
    body: 'Post Content',
  })
  .then(response => console.log(response.data));

fetch() 示例（数据处理）：

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

• 错误处理： 在 Axios 中，HTTP 错误会自动处理，任何状态码超出 2xx 范围的响应都会触发 catch 块。这意味着 Axios 将服务器错误（如 404 或 500）视为异常，从而使错误管理更加直观。相反， fetch() 仅在网络故障时拒绝，并且仍然解决服务器错误。您需要手动检查 response.ok 属性以处理错误。

fetch() 示例（错误处理）：

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

3. 向后兼容性

Axios 的一个显着优势是它对旧版浏览器的支持。 Axios 在底层使用 XMLHttpRequest，使其甚至可以在 Internet Explorer 11 等环境中运行。这使其成为需要广泛的浏览器兼容性而无需额外配置的项目的绝佳选择。

另一方面， fetch() 是一种现代 API，仅适用于较新的浏览器 - 特别是 Chrome 42 、 Firefox 39 、 Edge 14 和 Safari 10.3 。如果向后兼容性很重要并且您仍然喜欢使用 fetch()，则可以使用 polyfill：

使用 fetch() Polyfill：

  axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'Post Title',
    body: 'Post Content',
  })
  .then(response => console.log(response.data));

使用 Polyfill 的设置示例：

  fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      title: 'Post Title',
      body: 'Post Content'
    })
  })
  .then(response => response.json())
  .then(data => console.log(data));

在这种情况下，whatwg-fetch 允许 fetch() 通过模拟本机 API 在旧版浏览器中工作。然而，添加 Polyfill 会增加整体包的大小，这对于性能敏感的应用程序来说可能是一个缺点。

Axios 与 fetch 在语法、数据处理和兼容性方面存在显着差异。 Axios 简化了 JSON 解析和错误处理等常见任务，使其对快速开发具有吸引力。然而，如果您习惯手动处理 JSON 并且不需要支持过时的浏览器，那么 fetch() 在浏览器中的本机可用性使其成为强大、轻量级的选择。

易用性和开发人员体验

当谈到开发者体验时，Axios 与 fetch 之间的争论通常围绕着它们在常见和复杂场景中的易用性展开。下面详细介绍了两者在简单性和灵活性方面的表现。

1. Axios 对于常见用例的简单性

Axios 旨在让 HTTP 请求更简单、更直观。它提供了一个简洁且对开发人员友好的 API，易于设置，特别是对于 GET 和 POST 请求等标准用例：

使用 Axios 的简单 GET 请求示例:

  fetch('https://jsonplaceholder.typicode.com/invalid-endpoint')
    .then(response => {
      if (!response.ok) {
        throw new Error('Server Error');
      }
      return response.json();
    })
    .catch(error => console.error('Error:', error));

仅用几行代码，Axios 就处理了整个请求-响应周期，包括 JSON 解析和错误管理。它会自动将响应转换为 JavaScript 对象，从而轻松与数据交互。

2. 边缘情况下 fetch() 的详细程度

虽然 fetch() 对于基本请求来说很简单，但在处理复杂场景（例如设置超时或管理错误）时，它会变得更加冗长：

使用 fetch() 处理超时的示例:

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

在此示例中，管理超时需要额外的代码来设置 AbortController。虽然这使得 fetch() 变得灵活，但与 Axios 内置的超时配置相比，它需要更多的样板代码。

3. Axios 的简洁语法与 fetch() 的灵活性

• Axios 的简洁语法:
  
  Axios 的语法旨在减少样板代码，从而更轻松地用更少的代码行处理请求。它自动转换 JSON，简化错误处理，并提供请求取消和拦截器等内置功能，从而简化开发。这使其成为快速高效的 HTTP 交互至关重要的项目的理想选择。

• fetch() 的灵活性:
  
  另一方面，fetch() 提供了更灵活和模块化的方法。它不会强加任何默认行为，使开发人员能够完全控制请求和响应周期。虽然这需要更多的手动处理，但它也提供了根据特定需求实施定制解决方案的灵活性。

性能考虑因素

在Axios 与 fetch 之间进行选择通常取决于性能需求和项目的具体要求。

1. 基于性能要求的适用性

• 简单请求：
  
  对于基本数据获取，fetch() 通常更合适。它是一个轻量级的内置选项，可以减少包的大小，因为它不依赖于外部依赖项。

• 复杂的交互:
  
  Axios 擅长处理需要拦截器、自定义标头和错误处理等功能的复杂场景。这些内置工具可以节省大型应用程序的开发时间，使 Axios 成为企业级项目的更好选择。

2. 网络延迟和响应处理

• 网络延迟:
  
  Axios 和 fetch() 之间的原始速度没有显着差异，因为两者都依赖于类似的底层技术。 Axios 由于其功能可能会带来轻微的开销，但这对于大多数用例来说通常可以忽略不计。

• 响应处理:
  
  axios 简化了 JSON 处理，自动解析响应，而 fetch() 需要使用 response.json() 手动解析。这使得 Axios 在 JSON 密集型应用程序的开发时间方面稍快一​​些。

3. 选择 Axios 与 fetch() 的场景

• 当 Axios 过度杀戮时:
  
  如果您的项目涉及简单的请求和最少的数据处理，那么 fetch() 的原生、简洁的方法是理想的选择。对于轻量级应用程序，避免 Axios 的额外重量。

• 当 fetch() 需要帮助时:
  
  对于需要集中错误处理、重试或复杂标头的应用程序，fetch() 可能会变得很麻烦。在这些情况下，Axios 提供了更简化的解决方案，无需大量自定义代码。

通过了解这些性能方面，您可以根据项目的复杂性和规模在 Axios 与 fetch 之间做出选择。

Axios 与 Fetch 的功能比较

为了充分了解Axios 与 fetch 的优缺点，让我们通过实际示例探索它们的主要功能：

1. 自动数据转换

Axios 自动处理 JSON 转换，转换请求负载和响应，无需额外代码：

Axios 示例（自动 JSON 处理）:

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

在 Axios 中，请求和响应中都会自动解析 JSON，简化了流程。

fetch() 示例（手动 JSON 解析）:

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

使用 fetch() 时，您需要在发送数据之前手动 JSON.stringify() 数据并调用 response.json() 来解析响应，这会增加一点复杂性。

2. 超时管理

处理超时对于 HTTP 请求来说可能是一个挑战。 Axios 通过内置超时属性使事情变得简单：

Axios 示例（内置超时）:

  axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'Post Title',
    body: 'Post Content',
  })
  .then(response => console.log(response.data));

在 Axios 中，设置超时就像添加超时配置一样简单。

fetch() 示例（使用 AbortController 实现超时）:

  fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      title: 'Post Title',
      body: 'Post Content'
    })
  })
  .then(response => response.json())
  .then(data => console.log(data));

使用 fetch()，超时需要使用 AbortController 执行额外的步骤，这使得与 Axios 相比不太简单。

3. 错误处理

错误处理是 Axios 凭借内置分类而大放异彩的另一个领域：

Axios 示例（错误分类）:

  fetch('https://jsonplaceholder.typicode.com/invalid-endpoint')
    .then(response => {
      if (!response.ok) {
        throw new Error('Server Error');
      }
      return response.json();
    })
    .catch(error => console.error('Error:', error));

axios 将错误分为响应、请求、未知，方便调试。

fetch() 示例（手动错误处理）:

npm install whatwg-fetch --save

使用 fetch() 时，需要使用 response.ok 手动检查服务器错误，因为它默认不会拒绝非 2xx 状态代码的承诺。

4. HTTP 拦截器

拦截器允许全局处理请求和响应，这是 Axios 原生支持的：

axios 示例（全局请求拦截器）:

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

Axios 使得在发送请求之前添加标头或日志信息变得简单。

fetch() 示例（自定义拦截器实现）:

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

fetch() 没有本机拦截器，但您可以通过覆盖全局 fetch 方法来模仿该行为。

高级用例

1. 同时请求

处理多个请求在 Web 开发中很常见，Axios 和 fetch() 都有自己的方式：

Axios 示例（使用 axios.all 进行同时请求）:

  axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'Post Title',
    body: 'Post Content',
  })
  .then(response => console.log(response.data));

Axios 提供了 axios.all() 和 axios.spread() 来干净地处理并发请求。

fetch() 示例（使用 Promise.all 的同时请求）:

  fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      title: 'Post Title',
      body: 'Post Content'
    })
  })
  .then(response => response.json())
  .then(data => console.log(data));

使用 fetch()，您可以使用 Promise.all() 来处理多个请求，需要手动解析每个响应。

2. 文件上传和进度指示器

由于内置支持，文件上传和显示进度在 Axios 中更加容易：

Axios 示例（文件上传进度指示器）:

  fetch('https://jsonplaceholder.typicode.com/invalid-endpoint')
    .then(response => {
      if (!response.ok) {
        throw new Error('Server Error');
      }
      return response.json();
    })
    .catch(error => console.error('Error:', error));

Axios 的 onUploadProgress 回调非常适合实时显示上传进度。

fetch() 示例（文件上传和下载进度）:

npm install whatwg-fetch --save

使用 fetch()，实现文件进度需要手动处理 ReadableStream，这增加了复杂性。

现实场景：何时使用 Axios 与 fetch()

在Axios 与 fetch 之间做出选择很大程度上取决于您项目的具体需求。以下是每种工具最有效的时间：

1. 各有千秋的用例

• 小型项目： 如果您正在构建一个需要基本数据获取的简单项目，那么 fetch() 通常是更好的选择。它是轻量级的，内置于​​浏览器中，并且避免添加外部依赖项。这使得它非常适合简单的任务，例如从 API 获取 JSON 数据或提交表单。

示例：只需要发出一些 API 请求的个人博客或小型网站就可以使用 fetch()，而无需使用更大的库的开销。

• 企业应用： 在大型项目中，Axios 具有明显的优势。其内置功能（如拦截器、全局配置和自动数据转换）简化了代码维护和错误处理。这使得 Axios 更适合复杂的应用程序，其中结构化和一致的 HTTP 处理至关重要。

示例：与多个 API 交互并需要强大的错误处理功能的财务仪表板将受益于 Axios 的简化设置和功能。

2. 成本效益分析

在Axios 与 fetch 之间进行选择通常需要评估 Axios 的优点是否值得额外的依赖。对于小型项目， fetch() 通常就足够了，可以最大限度地减少包大小并简化设置。然而，在可维护性、代码一致性和高级功能很重要的企业应用程序中，Axios 的优势可能超过添加库的成本。

处理 CORS

1. 什么是 CORS？

跨源资源共享（CORS）是一项安全功能，允许服务器指定谁可以访问其资源。当向不同的域发出请求时，CORS 策略可确保您的应用程序能够安全地获取数据。

• Axios 和 fetch() 处理 CORS 请求的方式类似，因为它们都依赖于浏览器的 CORS 策略。一个常见的错误是在请求中添加 Access-Control-Allow-Origin 标头 - 该标头只能由服务器设置。正确配置的服务器将在响应中包含此标头以指示允许的来源。

2. 正确的 CORS 设置示例

Axios 示例:

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

fetch() 示例:

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

在这两种情况下，请确保服务器配置为允许跨源请求。

性能优化技巧

优化 Axios 和 fetch() 有助于提高应用程序性能，尤其是在处理大量数据或频繁发出请求时。

1. 缓存

• Axios：使用像 axios-cache-adapter 这样的缓存库来缓存响应并减少冗余的网络请求。
• fetch()：使用 localStorage 或 sessionStorage API 实现简单的缓存机制来存储获取的数据。

2. 响应处理

有效处理响应以减少网络负载：

• axios：使用拦截器全局管理响应，仅解析相关数据。
• fetch()：通过使用 URL 参数或查询字符串来限制服务器响应，避免获取不必要的数据。

3. 最小化网络负载

• Axios：使用 CancelToken 功能取消不再需要的请求，减少网络负载的浪费。
• fetch()：利用AbortController终止不需要的请求。

通过了解何时使用Axios 与 fetch 并应用这些优化技术，您可以确保您的项目顺利运行，同时最大限度地减少网络影响。

结论

在Axios 与 fetch 之间进行选择最终取决于项目的复杂性和要求。 Axios 非常适合大型企业级应用程序，其中结构化代码、集中式错误处理和拦截器等内置功能可以简化开发。另一方面，fetch() 非常适合需要简单、轻量级数据获取而无需额外库开销的小型项目。对于优先考虑以最少的设置快速实施的开发人员来说，Axios 提供了便利，而那些寻求完全控制和灵活性的开发人员将欣赏 fetch()。如果您正在考虑替代方案，请探索 React Query 与 Axios 的比较，以了解更高级的数据获取策略。您的选择应符合应用程序的规模和需求，平衡简单性、性能和代码可维护性。

以上是Axios 与 Fetch：您应该为您的项目选择哪一个的详细内容。更多信息请关注PHP中文网其他相关文章！