简介
在 Web 开发中，我们经常需要与服务器进行数据交互。而在前端开发过程中，我们通常使用 AJAX 技术来实现这种交互，而 AJAX 核心方法之一就是使用 XMLHttpRequest 对象向服务器发送 HTTP 请求。
然而，原生的 XMLHttpRequest 接口相对来说比较麻烦，需要编写许多冗长的代码。因此，有很多类库和框架能够帮助我们简化这一过程，其中重要的 npm 包 @avidjs/request 是本文的重点内容。
@avidjs/request 是一个基于 XMLHttpRequest 封装的类库，提供了一种简单的方式来发送 AJAX 请求。@avidjs/request 提供了丰富的功能，如 JSON 和 FormData 数据的自动转换，请求的拦截器功能，以及对 JavaScript 对象和 URLSearchParams 的支持等。
安装
使用 npm 安装 @avidjs/request 时，可以在命令行中执行以下命令：
npm install @avidjs/request
基本用法
发送一个 GET 请求的最基本用法如下所示：
import { get } from '@avidjs/request'
get('/api/user/info').then((response) => {
console.log(response)
})发送一个 POST 请求并带有数据的用法：
import { post } from '@avidjs/request'
post('/api/user/update', {
name: 'Alice',
age: 18
}).then((response) => {
console.log(response)
})高级用法：拦截器
@avidjs/request 提供了请求拦截器的功能，可以在请求发出之前和响应返回之前拦截请求并对其作出一些修改。
在下面的示例中，我们定义了一个请求拦截器，它在请求发出之前添加了一个 Authorization 报头。
-- -------------------- ---- -------
------ - ------ - ---- -----------------
----- ------- - --------
----------------------------------------- -- -
-------------- - -
------------------
-------------- ------- - - -----------------------------
-
------ ------
--高级用法：取消请求
@avidjs/request 提供了一个 CancelToken 类，使我们能够取消特定请求。一般情况下，我们可以通过创建一个 CancelToken 实例并将它传递给 config 参数来取消请求。如下所示：
-- -------------------- ---- -------
------ - ------- ----------- - ---- -----------------
----- ------- - --------
----- ------ - --------------------
----------------------------- - ------------ ------------ ------------------ -- -
---------------------
-------------- -- -
-- --------------------------- -
---------------------
- ---- -
----------------
-
--
-- ----
------------------------总结
通过使用 @avidjs/request，我们可以轻松地发送 AJAX 请求，而不必编写复杂的 XMLHttpRequest 接口代码。此外，@avidjs/request 还提供了拦截器和取消请求等高级功能，使我们的开发工作更加方便和高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600563ea81e8991b448e13a3