Fetch 和 Axios.js 发出 http 请求的区别

在Web应用中，http请求是必不可少的。而当涉及到使用JavaScript发出http请求时，我们通常会考虑使用Fetch或者Axios.js。Fetch是浏览器自带的API，而Axios.js是一种流行的第三方库。本文将介绍Fetch和Axios.js的区别及其使用场景。

Fetch

简介

Fetch API是浏览器提供的一种新的发出http请求的方式，其基于Promise的设计方式，能够实现异步数据请求和响应。Fetch具有以下特点：

• 提供了一种简单的、基于Promise的http请求API。
• 能够在Web Workers中使用，从而避免了在主应用程序中发生阻塞。
• 自动解析JSON数据，可以手动转换为其他形式的数据。
• 基于标准，不依赖第三方库。

优缺点

Fetch的主要优点是：

• 标准化API，能够在不同的浏览器中得到一致的表现。
• 基于Promise，可以更加方便地处理异步代码。
• 不依赖第三方库，可以减少代码库的大小。

然而，Fetch也存在一些缺点：

• 无法直接取消请求，需要手动实现。
• 不支持IE浏览器。
• 无法支持上传进度监控。

使用方式

Fetch的基本语法如下：

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

其中，第一个.then()用于解析响应的数据类型（JSON/XML/文本等），第二个.then()则用于处理解析后的数据。

Fetch可以通过第二个参数来配置请求，例如：

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

Axios.js

简介

Axios.js是一种流行的第三方库，用于发出http请求以及处理响应。其具有以下特点：

• 支持Promise API。
• 支持并发请求。
• 支持取消请求。
• 支持拦截请求和响应。
• 基于XHR实现，可以在浏览器和Node.js环境中使用。

优缺点

Axios.js的主要优点是：

• API全面，提供了许多方便的功能。
• 支持Promise，可以更方便地处理异步代码。
• 支持取消请求。
• 支持拦截请求和响应，能够以统一的方式处理http请求和响应。

缺点是Axios.js体积较大，需要导入第三方库。

使用方式

Axios.js的基本语法如下：

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

其中，get()函数用于发出GET请求。Axios.js还提供了其他请求方式，例如POST、PUT、DELETE等。

Axios.js同时也支持配置请求，例如：

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

以上配置将向/user/12345发送一个POST请求，并附带一个JSON格式的数据。

总结

Fetch和Axios.js各有优缺点，选择哪种方式主要取决于自己的需求。如果希望更加简洁的API以及不依赖第三方库，则选择Fetch；如果需要拦截请求或响应、取消请求等高级功能，则选择Axios.js。