在前端开发中，经常需要进行接口测试或模拟数据，为了方便测试，我们可以使用 Polly.js 来拦截、记录、重放网络请求。
Polly.js 是一个强大的网络请求拦截库，可以用于测试、开发和文档编写等各种场景，它支持 fetch、XMLHttpRequest、Node.js 等一系列网络请求客户端，提供了方便的 API 和插件机制。
在 Polly.js 的插件中，@pollyjs/adapter 是一个适配器插件，它可以用于支持更多的客户端请求库，比如 axios、superagent、got、request 等，同时我们也可以很方便地扩展其他的请求库。
本文将介绍如何使用 npm 包 @pollyjs/adapter 来为不同的请求库添加 Polly.js 的拦截和记录功能。我们将以 axios 为例进行说明，包括安装、配置、测试等步骤，旨在帮助大家更好地了解和应用 Polly.js。
安装
为了在项目中使用 @pollyjs/adapter，我们需要先安装它到我们的项目依赖中。
npm install -D @pollyjs/core @pollyjs/adapter @pollyjs/adapter-fetch axios
其中：
- @pollyjs/core 是 Polly.js 核心库；
- @pollyjs/adapter 是适配器插件；
- @pollyjs/adapter-fetch 是 fetch 的适配器插件，我们也可以选择其他适配器插件；
- axios 是我们的示例项目中使用的请求库，其他请求库也可以使用。
配置
安装完成后，我们需要在项目中进行配置，为不同的请求库添加对应的拦截器和适配器插件。以 axios 为例，我们可以在入口文件中进行如下配置：
-- -------------------- ---- ------- -- ----------- ------ ----- ---- -------- ------ ----- ---- ---------------- ------ ---------- ---- ----------------------- ------ ------------ ---- ------------------------- ------ - ---------- - ---- ---------------- --------------------------- ----------------------------- ------------ --------- ------- --------- ---------- ----------------------------------- -------- ------ --- ----- ----- - --- --------------- ---------------------- - --------------
可以看到，主要步骤包括：
- 注册适配器插件；
- 进行 Polly.js 的通用配置；
- 创建一个 Polly 实例；
- 配置 axios 默认的 adapter 为 Polly 实例的 adapter。
其中：
- adapters 表示应用的适配器插件列表；
- persister 表示使用本地存储；
- logging 表示禁用 Polly.js 日志；
- Polly 实例的名称为 'axios'。
测试
完成配置后，我们可以进行测试来验证拦截和记录功能是否正常。以下是一个简单的测试用例，它使用 axios 发起一个 GET 请求，并通过 Polly.js 的 API 来获取该请求的记录。
-- -------------------- ---- ------- -- ----------- ------ ----- ---- -------- ------ ----- ---- ---------------- ------ ---------- ---- ----------------------- ------ ------------ ---- ------------------------- ------ - ---------- - ---- ---------------- --------------------------- ----------------------------- ------------ --------- ------- --------- ---------- ----------------------------------- -------- ------ --- ----- ----- - --- --------------- ---------------------- - -------------- ------ -------- ------ - ----- - ---- - - ----- ---------------------------------------------------------- ------------------ ----- - --------- - - ---------------------------- ---- ----------------------------------------------- ----------------------- -----
可以看到，我们使用 axios 发起一个 GET 请求，然后通过 Polly.js 的 API 来查找该请求的记录。其中：
- axios.get 发起了请求；
- polly.findRecording 查找请求的记录；
- console.log 打印请求的结果和记录。
运行测试代码后，我们可以在控制台中看到请求的结果和记录，证明 Polly.js 的拦截和记录功能已经成功应用。
总结
通过本篇文章的介绍，我们了解了如何使用 npm 包 @pollyjs/adapter 来为不同的请求库添加 Polly.js 的拦截和记录功能。我们借助 axios 作为示例，讲解了安装、配置、测试等步骤，并提供了详细的示例代码。
Polly.js 是一个非常实用的库，它可以节省我们很多测试和开发的时间，同时也有助于提高我们的前端开发效率。希望本文对大家有所帮助，也欢迎大家进一步了解和应用 Polly.js。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/99790