Axios 还是 Fetch？——2 分钟带你了解详情

你是否曾好奇过，为什么开发者会选择 Axios 而不是 fetch？我们知道，两者都是处理 HTTP 或 XMLHttp 请求的工具，都能发起各种类型的 API 调用（get、post、put 等），也都基于 ES6 原生的 Promise API。那么，究竟有哪些关键区别需要注意呢？

首先，`.fetch()` 在处理 JSON 数据时分为两个步骤。第一步是发出实际的请求，第二步是对响应调用 `.json()` 方法。

const url = 'https://api.spotify.com/v1/artists/0OdUWJ0sBjDrqHygGUXeCF'

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

作为优秀的开发者，我们的主要目标是尽可能减少代码量。Axios 仅用一行代码就实现了这一点。

const url = 'https://api.spotify.com/v1/artists/0OdUWJ0sBjDrqHygGUXeCF'

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

其次是错误处理。从逻辑上讲，如果 `.fetch()` 出现错误，它应该进入 `.catch()` 代码块并返回，但实际上它最终会执行链中的下一个 `then()` 语句。请参见下文：

但 Axios 的处理方式符合预期。

它从 catch 中返回，不再使用 .then() 链式调用。

因此，.fetch() 方法是 ES6 中获取 HTTP 请求原生数据的绝佳方式，但也有一些陷阱，这些陷阱可以通过第三方库来处理。