http request-03-Ajax 的替代方案 axios.js 入门介绍

http 请求系列

http request-01-XMLHttpRequest XHR 简单介绍

http request-01-XMLHttpRequest XHR 标准

Ajax 详解-01-AJAX（Asynchronous JavaScript and XML）入门介绍

Ajax XHR 的替代方案-fetch

Ajax XHR 的替代方案-fetch 标准

http request-03-Ajax 的替代方案 axios.js 入门介绍

http 请求-04-promise 对象 + async/await

Axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

Features

• 从浏览器中创建 XMLHttpRequests

• 从 node.js 创建 http 请求

• 支持 Promise API

• 拦截请求和响应

• 转换请求数据和响应数据

• 取消请求

• 自动转换 JSON 数据

• 客户端支持防御 XSRF

入门例子

为什么需要 axios

axios 是一个基于 Promise 的 HTTP 客户端，常用于现代前端开发中与后端进行数据交互。

以下是使用 axios 的几个主要原因：

1. 简洁的 API: axios 提供了更为直观和简洁的 API，使得发起 HTTP 请求（如 GET、POST、PUT、DELETE）变得更容易理解和使用。相比原生的 XMLHttpRequest 或 fetch，axios 的代码通常更为简洁。

2. 更好的浏览器兼容性: 虽然 fetch 也提供了现代浏览器的原生支持，但 axios 可以更好地兼容一些旧版本的浏览器，尤其是在处理跨域请求和响应数据时。

3. 自动转换 JSON 数据: axios 自动将响应数据解析为 JSON，这在处理 API 请求时非常方便。fetch 需要手动调用 .json() 方法来解析响应数据，而 axios 自动处理这一部分。

4. 请求和响应的拦截器: axios 提供了请求和响应的拦截器功能，允许在请求发送前或收到响应后进行处理。这对于统一添加认证头、错误处理、日志记录等场景非常有用。

5. 取消请求: axios 提供了取消请求的功能，通过 CancelToken 可以轻松地中止一个正在进行的请求，这是 fetch 不直接支持的功能。

6. 并发请求处理: axios 提供了诸如 axios.all 等方法，方便处理多个并发请求，并且可以在所有请求完成后执行操作。

7. 支持 Node.js: axios 不仅在浏览器中工作良好，在 Node.js 环境中同样表现出色，因此可以在同一个代码库中统一使用 axios 进行 HTTP 请求。

axios 有哪些优缺点？适用场景？

Axios 是一个基于 Promise 的 HTTP 客户端，适用于浏览器和 Node.js，它具有以下优点和特性：

1. Promise API 支持：Axios 支持 Promise，使得异步请求更加简洁和易于管理 。
2. 同构性：Axios 可以在浏览器和 Node.js 中使用相同的代码，这使得它在前端和后端开发中都非常有用 。
3. 请求和响应拦截器：Axios 允许拦截请求和响应，这可以用于统一处理请求头、身份验证、错误处理等 。
4. 数据转换：Axios 可以自动转换请求和响应数据，例如 JSON 数据的序列化和反序列化 。
5. 取消请求：Axios 提供了取消请求的功能，这在处理复杂的异步操作时非常有用 。
6. 超时和配置：Axios 支持设置请求超时，并允许自定义配置，如请求头、数据类型等 。

然而，Axios 也有一些潜在的缺点：

1. 依赖 Promise：由于 Axios 完全依赖于 Promise，那些不熟悉 Promise 或者需要支持不兼容 Promise 的环境的开发者可能会遇到一些困难。
2. 缺少浏览器兼容性：虽然 Axios 可以在大多数现代浏览器中使用，但在一些非常旧的浏览器中可能需要 polyfills。
3. API 复杂性：尽管 Axios 的 API 设计得很直观，但对于初学者来说，其丰富的配置选项可能会有一定的学习曲线。

Axios 的适用场景包括但不限于：

• 需要进行 HTTP 请求的任何前端项目，尤其是在使用现代 JavaScript 框架如 Vue.js 或 React 时 。
• 在 Node.js 环境中进行 HTTP 请求，尤其是在构建 API 或服务时 。
• 需要进行请求和响应拦截的复杂应用，以便于统一处理认证、错误处理等 。