理解 Axios、jQuery Ajax 和 Fetch 的差别

在现代 Web 开发中，处理 HTTP 请求是一个常见的需求。为了满足这一需求，开发者们可以选择使用多种工具和库。本文将重点讨论三种常用的 HTTP 请求工具：Axios、jQuery 的 Ajax 和 Fetch API，分析它们的区别和各自的优缺点。

一、jQuery Ajax

1. 简介

jQuery 是一个功能强大的 JavaScript 库，Ajax 是其核心功能之一。通过 jQuery Ajax，我们可以轻松地进行异步 HTTP 请求，更新页面内容而无需重新加载页面。

2. 使用示例

$.ajax({
    url: 'https://api.example.com/data',
    type: 'GET',
    success: function (data) {
        console.log('Success:', data);
    },
    error: function (xhr) {
        console.error('Error:', xhr);
    }
});

3. 优点

• 兼容性好：jQuery 兼容性好，支持所有主流浏览器。
• 功能全面：内置了很多实用的功能，例如 JSONP 支持、跨域请求等。
• 简化 DOM 操作：结合 jQuery 的其他功能，可以更方便地操作 DOM。

4. 缺点

• 体积大：引入 jQuery 库会增加页面的加载时间，尤其是对于仅需要 Ajax 功能的项目。
• 过时：随着现代 JavaScript 标准的发展，使用 jQuery 已经不是最优选择。

二、Fetch API

1. 简介

Fetch API 是现代浏览器提供的原生 API，用于替代传统的 XMLHttpRequest（XHR）。它基于 Promise，提供了更简洁和强大的接口来处理 HTTP 请求。

2. 使用示例

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log('Success:', data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

3. 优点

• 现代化：基于 Promise，支持 async/await，代码更简洁。
• 内置：无需引入额外的库，现代浏览器均支持。
• 灵活性高：提供了丰富的配置选项，适合各种复杂场景。

4. 缺点

• 兼容性：在一些旧版本浏览器中不支持，需要引入 polyfill。
• 功能有限：某些高级功能（如请求取消）需要手动实现或配合其他工具。

三、Axios

1. 简介

Axios 是一个基于 Promise 的 HTTP 客户端，可以运行在浏览器和 Node.js 中。它提供了更加简洁和易用的接口，支持拦截请求和响应、取消请求、自动转换 JSON 数据等功能。

2. 使用示例

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

3. 优点

• 简单易用：封装了复杂的 XHR，接口简洁明了。
• 功能强大：支持请求和响应拦截、取消请求、默认设置等高级功能。
• 跨平台：同时支持浏览器和 Node.js 环境。

4. 缺点

• 依赖库：需要引入 Axios 库，增加了项目的依赖。
• 体积大于 Fetch：相比原生 Fetch API，Axios 库的体积稍大。

总结

除了这些基本区别，预检请求（preflight request）也是一个需要考虑的重要方面。

预检请求通常是在跨域请求中触发的，用于检查服务器是否允许该请求。下面我们将详细讨论预检请求以及 Axios、jQuery Ajax 和 Fetch API 在这方面的表现。

四、什么是预检请求？

预检请求（Preflight Request）是浏览器在发出实际请求之前自动发出的一个 OPTIONS 请求。预检请求用于确保服务器允许实际请求的 HTTP 方法和自定义请求头。只有在预检请求成功后，浏览器才会发送实际请求。

五、预检请求触发的条件

预检请求会在以下情况下触发：

1. 使用了 HTTP 方法：PUT、DELETE、CONNECT、OPTIONS、TRACE、PATCH。
2. 设置了某些自定义请求头（如 x-requested-with、Content-Type 非 application/x-www-form-urlencoded、multipart/form-data、text/plain）。
3. 请求中包含了某些自定义内容类型。

六、jQuery Ajax 和预检请求

jQuery 的 $.ajax 默认会添加 x-requested-with 头，这会导致触发预检请求。除非显式移除这个头，否则跨域请求时会自动触发预检请求。

示例

$.ajax({
  url: 'https://api.example.com/data',
  type: 'GET',
  headers: {
    'X-Requested-With': undefined // 显式移除 x-requested-with 头以避免预检请求
  },
  success: function (data) {
    console.log('Success:', data);
  },
  error: function (xhr) {
    console.error('Error:', xhr);
  }
});

七、Fetch API 和预检请求

Fetch API 默认不会添加 x-requested-with 头，因此在默认情况下不会触发预检请求。但是，如果你添加了自定义请求头或使用了某些 HTTP 方法（如 PUT、DELETE），也会触发预检请求。

示例

fetch('https://api.example.com/data', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  }
})
  .then(response => response.json())
  .then(data => {
    console.log('Success:', data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

八、Axios 和预检请求

与 Fetch API 类似，Axios 默认不会添加 x-requested-with 头，但会根据请求配置添加相应的请求头。如果你在请求中设置了自定义头或使用了某些 HTTP 方法，也会触发预检请求。

示例

axios.get('https://api.example.com/data', {
  headers: {
    'Content-Type': 'application/json'
  }
})
  .then(response => {
    console.log('Success:', response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

九、比较总结

在实际开发中，选择合适的 HTTP 请求工具时，还需要考虑以下因素：

1. 兼容性：如果需要兼容旧版浏览器，可以选择 jQuery Ajax 或引入 Fetch 的 polyfill。
2. 项目体积：如果希望减少引入库的体积，可以选择原生的 Fetch API。
3. 功能需求：如果需要更多高级功能（如请求拦截、取消请求等），Axios 是一个很好的选择。
4. 跨域请求：需要注意预检请求的影响，选择工具时确保可以方便地控制请求头。

选择合适的工具取决于项目需求和环境。如果需要支持旧浏览器或者已经在使用 jQuery，可以继续使用 jQuery Ajax。如果希望代码现代化并且项目环境支持，可以使用 Fetch API。如果需要更多高级功能和更好的代码可读性，Axios 是一个较好的选择。