Fetch 和 Axios 用于发起 HTTP 请求的区别

Fetch 或 Axios 经常被开发者用来在 Web 应用和服务器之间进行流畅的 HTTP 协议通信。虽然它们很相似，但有些人认为 Axios 更直观。但也有内置的 API Fetch，它与 Axios 一样强大。

Fetch API

Fetch API 是一个内置的 JavaScript 函数，它提供了一个简单的接口来发起 HTTP 请求。它在现代浏览器中引入，是像 XMLHttpRequest 这样的旧方法的原生替代方案。

fetch(url, options)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Fetch 返回一个 Promise，这使得它适合处理异步操作。该 API 灵活，但在处理错误和拦截器等复杂场景时可能会变得冗长。

Axios 是一个流行的第三方库，用于在 JavaScript 中发起 HTTP 请求。它通常因其简单易用而受到青睐，尤其是在需要拦截器和请求/响应转换等附加功能的大型应用程序中。

axios.get(url)
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

Axios 也返回一个 Promise，并提供更简洁的语法，内置支持诸如自动 JSON 解析和超时管理等功能。

特性	Fetch API	Axios
原生支持	内置于现代浏览器中；无需额外的库。	需要通过 npm 或 CDN 安装。
语法	可能比较冗长，尤其是在处理错误时。	更简洁直观。
错误处理	必须手动检查 HTTP 错误（例如，404、500）。	自动处理 HTTP 错误。
请求配置	选项对象用于配置标题、方法、主体等。	Axios 配置对象支持标题、参数、超时等。
浏览器支持	广泛支持，但某些旧版浏览器可能需要 polyfills。	也广泛支持，具有更好的向后兼容性。
拦截器	没有内置的请求/响应拦截器支持。	内置支持拦截器，可用于身份验证和日志记录。
请求取消	需要使用AbortController进行额外的逻辑处理。	内置支持使用CancelToken取消请求。

Sudipa Biswas

更新于：2024年8月19日

54 次查看

通过完成课程获得认证