Fetch API 与 Axios 的对比

在 JavaScript 的世界中，Fetch API 和 Axios 是两种常用的 HTTP 请求工具。两者都提供了强大的功能，但在使用方式、兼容性及扩展能力方面存在显著差异。本文将详细探讨 Fetch API 和 Axios 的差异，以帮助开发者在不同场景中选择合适的工具。

Fetch API 和 Axios 概述

Fetch API 是一种内置于现代浏览器的接口，用于发送网络请求，而无需额外安装任何库。它通过 fetch() 方法来实现 HTTP 请求，并返回一个 Promise 对象。这使得 Fetch API 的使用变得非常简单和直观。

Axios 则是一个第三方库，通常通过 npm 或 yarn 安装。它能够在浏览器和 Node.js 中运行。Axios 的设计简洁，提供了丰富的功能如请求拦截器、取消请求、自动转换 JSON 数据等，这使得它在处理复杂的 HTTP 请求时非常有用。

安装 Axios

在 Node.js 环境中使用 Axios，可以通过以下两种方法进行安装：

通过 npm 安装：

npm install axios

通过 yarn 安装：

yarn add axios

安装后，在项目中引入 Axios：

import axios from "axios";

在浏览器中使用 Axios，可以通过 CDN 引入：

Fetch API 和 Axios 的语法区别

Fetch API 接受两个参数：第一个是要获取的资源的 URL，第二个是可选的配置对象。如果不提供配置对象，默认将发出 GET 请求。

fetch(url)

通过配置选项，我们可以为请求定义设置，例如请求方法、请求头、请求体等：

fetch(url, {
    method: 'GET', // POST, PUT, DELETE 等
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({})
})

Axios 的语法与 Fetch 类似，但提供了多种调用方式：

axios(url, {
    // 配置选项
})

可以附加 HTTP 方法：

axios.get(url, {
    // 配置选项
})

同样，我们可以使用第二个参数为请求定义自定义设置：

axios(url, {
    method: 'get',
    headers: {},
    data: {},
})

处理 JSON 数据

在 Fetch 中，我们需要手动处理 JSON 数据。Fetch 返回的 Promise 需要使用 .then() 方法解析为 JSON 格式：

fetch(url)
    .then(response => response.json())
    .then(data => console.log(data));

Axios 默认会将响应数据解析为 JSON 格式，并存储在 response.data 属性中。

axios.get(url)
    .then(response => console.log(response.data));

请求拦截器

Axios 提供了强大的拦截器功能，可以在请求或响应的各个阶段进行预处理。这在处理诸如添加通用请求头、错误处理、请求取消等场景中非常有用。

axios.interceptors.request.use(config => {
    // 在请求发送之前做些什么
    return config;
}, error => {
    // 对请求错误做些什么
    return Promise.reject(error);
});

Fetch 没有内置拦截器功能，但可以通过重写全局 Fetch 方法来实现类似的效果：

fetch = (originalFetch => {
    return (...args) => {
        const result = originalFetch.apply(this, args);
        return result.then(console.log("请求已发送"));
    };
})(fetch);

响应超时/取消请求

Axios 可以通过配置对象中的 timeout 属性来设置请求超时时间：

axios.get(url, {
    timeout: 4000 // 请求超时时间4秒
})
    .then(response => console.log(response.data))
    .catch(error => console.error("请求超时"));

Fetch 提供了 AbortController 接口来取消请求：

const controller = new AbortController();
const signal = controller.signal;

fetch(url, { signal: signal })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error("请求被取消"));

setTimeout(() => controller.abort(), 4000);

浏览器兼容性

Fetch 是现代浏览器的原生 API，但在某些旧版本浏览器（如 IE11）中不被支持。Axios 基于 XMLHttpRequest 实现，可以兼容所有主流浏览器，包括 IE11。

效率表现

Fetch 和 Axios 都是基于 Promise 的异步请求工具，因此在性能上差异不大。在某些特殊场景下，Fetch 的原生实现可能会稍快于 Axios，但对于大多数应用场景来说，这种速度差异可以忽略不计。

总结

Fetch API 和 Axios 各有优缺点，选择哪种工具取决于具体的应用场景和开发者的需求。如果需要原生支持且项目较为简单，Fetch 是一个不错的选择；而对于需要处理复杂请求、兼容性要求较高的项目，Axios 则更为合适。

FAQ

问：Fetch API 和 Axios 哪个更适合处理复杂请求？
- 答：Axios 更适合处理复杂请求，因为它提供了拦截器、取消请求、自动转换 JSON 数据等功能。
问：在老旧浏览器中能使用 Fetch API 吗？
- 答：Fetch API 在一些老旧浏览器中不支持，如 IE11。但可以通过引入 polyfill 来实现兼容。
问：Fetch 和 Axios 的性能差异大吗？
- 答：两者的性能差异很小，Fetch 可能在某些情况下稍快于 Axios，但这种差异通常可以忽略不计。
问：如何在 Fetch 中实现请求超时？
- 答：可以使用 AbortController 接口来实现请求超时，通过 setTimeout 方法在指定时间后调用 abort() 方法取消请求。
问：Axios 是否支持浏览器和 Node.js 环境？
- 答：是的，Axios 可以在浏览器和 Node.js 环境中运行。