用 Axios 一次搞懂适配器原理、请求/响应拦截、取消请求、CSRF 原理

2023-10-12 05:24:44

前言

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。它被广泛用于前端和后端开发中，以进行 AJAX 请求。Axios 提供了简洁的 API，可以轻松地发送 GET、POST、PUT、DELETE 等类型的 HTTP 请求。

Axios 的适配器原理

Axios 采用适配器模式来处理不同的 HTTP 请求。适配器模式是一种设计模式，它允许你通过创建一个适配器来将一个类的接口转换成另一个类的接口，从而使原本不兼容的类可以一起工作。

在 Axios 中，适配器负责将 Axios 的 API 转换成不同的 HTTP 库的 API。例如，Axios 可以使用不同的适配器来适配 Fetch API、XMLHttpRequest 和 Node.js 的 HTTP 模块。

当 Axios 发起一个 HTTP 请求时，它会先根据当前的环境选择一个合适的适配器。然后，Axios 会将请求参数传递给适配器，由适配器来负责将请求发送到服务器。服务器响应后，适配器会将响应数据返回给 Axios。

Axios 的请求和响应拦截

Axios 提供了请求拦截器和响应拦截器，允许你对请求和响应进行处理。请求拦截器可以在请求发送到服务器之前对请求进行修改，而响应拦截器可以在服务器响应到达后对响应数据进行修改。

请求拦截器和响应拦截器可以用于各种目的，例如：

添加或修改请求头
添加或修改请求参数
验证请求参数
处理错误响应
实现缓存

Axios 的取消请求

Axios 允许你取消正在进行的请求。这可以通过调用 cancelToken.cancel() 方法来实现。当请求被取消后，Axios 会向服务器发送一个取消请求，并拒绝处理服务器的响应。

取消请求可以用于各种目的，例如：

用户取消了请求
请求超时
重复的请求

CSRF 原理

CSRF（跨站请求伪造）是一种攻击方式，它允许攻击者在受害者的浏览器中执行恶意请求。CSRF 攻击通常是通过诱骗受害者点击恶意链接或打开恶意网站来实现的。

Axios 提供了内置的 CSRF 保护机制，可以防止 CSRF 攻击。Axios 的 CSRF 保护机制是通过在请求头中添加一个名为 X-XSRF-Token 的令牌来实现的。这个令牌是由服务器生成的，并且是唯一的。当 Axios 发起一个请求时，它会将 X-XSRF-Token 令牌添加到请求头中。服务器在收到请求后，会检查请求头中的 X-XSRF-Token 令牌是否正确。如果令牌不正确，服务器会拒绝处理请求。