Visual Studio Code（VSCode）是一款流行的代码编辑器，可作为API测试的替代工具。通过适当的扩展，开发人员可以在VSCode环境中轻松创建、管理和测试API。使用Thunder Client与VSCode进行API测试可以简化开发工作流程，并通过使用单一工具进行编码和测试来节省时间，本文将展示如何实现。

本文旨在为开发人员提供一种在VSCode中进行API测试的替代方案，以取代Postman。我们将介绍Thunder Client扩展程序，解释其工作原理、相对于Postman的优势以及如何安装和设置。本文还将涵盖使用Thunder Client进行请求和预览响应的内容。

Thunder Client是一个直观且轻量级的基于GUI的REST（表征状态转移）API测试工具，作为VSCode的扩展而提供。术语“API测试工具”指的是一种应用程序或插件，旨在允许不同系统之间的交互和通信，使用一组规则来建立这种连接，被视为API。与Postman等其他API测试工具相比，Thunder Client在近年来获得了很大的流行。

使用Thunder Client进行API测试将为您带来以下好处：

轻量级：Thunder Client是一个轻量级的插件，可以安装在您的VSCode编辑器上，方便您直接从编辑器中执行和测试API，无需下载单独的工具或在编码环境和基于Web的API测试平台之间切换

简单直观的用户界面：Thunder Client提供了一个简约的界面，使用户可以轻松地进行导航，无需使用手册。界面清晰地概述了API测试工具的各个部分，左侧分为活动历史、集合和环境变量。右侧则是请求定义窗口和响应属性部分。总体而言，可以说Thunder Client的界面是：

• 主要的Thunder Client界面被细分为逻辑部分，清晰地说明它们的功能，并且便于找到所需的功能。

• 图标和按钮清晰简洁。

• 颜色在整个用户界面中一贯使用，并且可以根据您的喜好使用VSCode主题进行定制。

• 整体设计简洁而不杂乱，使其易于使用。

集合和环境变量支持：与Postman一样，Thunder Client API测试工具也提供了集合功能，允许将类似的请求组织和分组，提高可访问性并与他人共享。Thunder Client集合功能还提供了从其他API测试工具（如Postman）导入集合的功能，使得将API集合迁移到Thunder Client工作区变得容易。Thunder Client还提供了一个窗口，用于创建和管理API测试所需的环境变量。API测试中的环境变量是指提供测试脚本配置详细信息的动态变量。这些变量可以在不同的场景中创建和重复使用，无需为每次使用重新声明它们。环境变量的示例包括身份验证凭据、请求头和测试参数。

• Git同步：Thunder Client的Git集成功能使用户能够将API请求信息保存并与Git存储库同步。该功能增强了团队之间的数据共享，并作为一种备份解决方案。

• 卓越的速度：Thunder Client的API测试工具确保快速处理大量或复杂的API请求，并提供及时的响应。重要的是，这款高性能的API测试工具保持轻量级，与您的VSCode应用程序和计算机无缝集成，而不会导致性能下降。

• CI/CD集成支持：Thunder Client还可以集成到CI/CD（持续集成和持续交付）流水线中，以便在部署API之前进行自动化测试。这种自动化节省了手动测试所需的时间和精力，并提高了API的可靠性。

• 使用本地存储处理离线请求：Thunder Client可以将请求数据存储在本地存储中，从而使您能够离线工作。当您发出请求时，Thunder Client首先会检查请求数据是否存储在本地存储中。如果数据可用，Thunder Client将使用缓存数据发送请求。如果请求数据未存储在本地存储中，Thunder Client将向API发送请求并将响应数据存储在本地存储中。通过Thunder Client，可以为缓存数据设置特定的时间或无限期缓存数据。当您离线发送请求时，Thunder Client将使用缓存数据发送请求。如果缓存数据不是最新的，Thunder Client将显示警告消息。一旦重新连接到互联网，Thunder Client将自动更新缓存数据。

• 支持语法高亮和VSCode主题：通过Thunder Client作为VSCode的附加扩展，它还采用您预设的VSCode主题，使其外观更具视觉吸引力。

• 无脚本API测试：与Postman和其他API测试工具不同，用户无需重复编写样板代码来进行基本的API测试，Thunder Client提供了直观简单的图形用户界面，可以使用下拉菜单来定义请求，而无需编写测试脚本。

Thunder Client是如何工作的？

Thunder Client通过使用Fetch API发送HTTP请求到API，然后以人类可读的格式显示响应数据。Fetch API是一种用于进行HTTP请求的原生JavaScript API。

Thunder Client扩展允许您执行以下简单任务：

• 进行HTTP请求并将其发送到API。

• 以易读的形式显示响应信息。

• 开发和控制请求集合。

• 在您的请求中使用环境变量。

• 使用基于图形用户界面的接口来测试API响应。

• 追踪请求。

• 支持GraphQL。

以下是您可以使用Thunder Client进行的具体操作示例：

• 通过创建一个新的请求，指定URL、请求方法、头部和正文，并发送请求，您可以使用Thunder Client来测试一个REST API。

• Thunder Client 可以帮助您构建特定 API 的请求集合。这可以使您轻松重复使用测试并帮助您组织它们。

• 使用Thunder Client，您可以在请求中使用环境变量。这在测试不同设置下的API时非常有用。

• 通过基于图形用户界面的界面，您可以使用Thunder Client测试API响应。对于不熟悉脚本编写的初学者来说，这可能非常有用。

• 你可以使用Thunder Client来调试请求。如果你在请求方面遇到问题，这将非常有帮助。

• 你可以使用Thunder Client来支持GraphQL API。

使用Thunder Client的优势

在讨论了Thunder Client是什么、它的工作模式以及它对使用者的好处之后，我们将讨论它与Postman这个流行的API测试工具的比较。

Thunder Client和Postman是两个知名的API测试工具，各自具有各种功能。以下是我们列出的Thunder Client相对于Postman在进行API测试方面的优势原因：

与VSCode的集成：Thunder Client无缝集成为VSCode环境中的插件，通过导航栏或键盘快捷键提供便捷的访问方式。这种集成使工作流程更加流畅，使用户能够在一个统一的应用程序中开发和测试API端点。这消除了下载单独工具和频繁在代码编辑和API测试之间切换的必要性。这与Postman形成鲜明对比，后者要么通过基于Web的平台进行API测试，要么通过需要在系统上安装的独立应用程序进行测试。

易用性：Thunder Client API测试工具比Postman拥有更简单、更友好的界面，使用户能够轻松学习和导航。Thunder Client还提供了多种快捷键来访问其功能。如其在GitHub存储库中所述，下面概述了Thunder Client上可用的快捷键：

Ctl+Shift+P

• Thunder Client — New Request

• Thunder Client — Run Last Request

• Thunder Client — Import Curl

• CurlThunder Client — Change Environment

• Thunder Client — Convert To Postman Format

• Cmd/Ctrl + Enter — To execute the request.

• Enter — on the request URL field to send the request.

• Cmd/Ctrl + s — Save Request without run.

• Cmd/Ctrl + click — on request in the Sidebar will open it in a new tab.

• Cmd/Ctrl + s — Environment view save data.

• Cmd/Ctrl + e — Change the active environment.

• Alt+Shft + f — Format Post Body data.

• Cmd/Ctrl + u — Import Curl.

• Alt + z — Toggle word-wrap on response.

• Escape — Cancel response in full-screen mode.

轻量级：Thunder Client API扩展比Postman应用软件占用更少的空间和系统资源。相反，Postman在处理较大请求时需要更多的内存和CPU资源。

总的来说，尽管Postman提供了比Thunder Client更多的功能，比如模拟服务器和与Jira或Slack等应用的集成，但对于那些希望拥有一个统一且轻量级的开发和API测试应用程序的用户来说，Thunder Client是一个最佳选择。

安装和设置

要在本地机器上设置Thunder Client，请按照以下步骤进行操作：

• 在代码编辑器中打开VSCode扩展部分。可以使用快捷键 ctrl + shift + X 或导航到左侧边栏并选择扩展选项来访问扩展窗口。

这将打开一个新窗口，显示在VSCode中安装的扩展和推荐的扩展，并提供一个搜索栏来找到所需的扩展。

• 在扩展窗口的搜索栏中，搜索“Thunder Client”，然后从结果列表中选择该选项

这提供了有关该扩展的额外细节，包括开发者链接、官方网站和文档。

• 选择“安装”选项将Thunder Client扩展集成到您的VSCode中。安装完成后，您将看到以下内容代替“安装”选项：

• 安装的Thunder Client扩展可以通过使用快捷键 ctrl + shift + R 访问，或者从左侧导航栏中选择该选项。

如何使用Thunder Client API测试工具

在这一部分中，我们将通过Thunder Client扩展演示执行各种API请求的方法。我们还将展示如何使用Thunder Client CLI，并在工作流程中使用Thunder Client实现CI/CD集成。

测试API调用

在本节中，我将为您介绍使用Thunder Client测试API调用的过程，包括如何发出请求、设置头部、参数以及如何处理响应。

让我们深入了解如何使用Thunder Client进行API调用测试。前端开发在很大程度上依赖于API测试，以确保前端与后端之间的无缝交互。我们将探索如何使用Thunder Client来测试和与API进行交互。

首先，让我们通过在左侧边栏中点击Thunder Client⚡的Lightning标志来创建一个新的API请求：

现在点击顶部的“新请求”按钮。

这将打开一个新的请求选项卡，我们可以在其中进行请求。

以下是您可以找到的选项：

• HTTP方法：选择您希望与API进行通信的方式。一些选项包括GET、POST、PUT、DELETE、PATCH、HEAD、OPTIONS或CUSTOM。

• 请求URL：输入您想要访问的API的网址。

• Headers: 提供有关您的请求的额外信息，例如您发送的数据类型或您的身份验证方式。

• 查询参数：通过这些设置与API共享数据。

• Body: 如果需要，输入要发送到API的数据。这取决于您使用的方法。

• 测试：检查API是否按预期响应。您可以检查响应的状态码、类型或特定数据。

• Auth:告诉API你的授权方式。选择基本身份验证、OAuth 2.0或Bearer令牌。

• 预运行：在发送请求之前准备好事物。您可以设置变量或执行其他任务。

• 运行请求：按下此按钮将请求发送到API。响应将显示在响应部分。

让我们向
https://dummyjson.com/products 发送一个GET请求并查看结果。将URL输入到URL字段中，然后点击发送或 Enter 。如果请求成功，我们应该会得到以下结果：

太棒了！如果我们看一下左侧边栏，我们会注意到请求已经添加到我们的活动中，当我们点击选项时，我们可以看到一些可用的选项：

更改您的请求

保持请求的良好组织非常重要，尤其是在处理多个请求时。为了使事情更清晰，让我们重新命名我们的请求。点击“重命名”按钮，在弹出的提示框中提供一个新的名称：

这个简单的步骤可以极大地提高您的测试过程的清晰度。

保存到收藏夹

当您使用收藏夹时，组织您的请求变得更加高效。

收藏将相关请求分组在一起，使得管理不同项目或功能的请求更加容易。要将您的请求保存到收藏夹中，请按照以下步骤操作：

• 从下拉菜单中选择“保存到收藏夹”选项。

• 选择“创建新收藏。”

• 为您的收藏输入一个有意义的名称。

• 点击“提交”按钮将您的请求保存到收藏中。

  
  

有了这个，我们应该已经创建了新的收藏并保存了我们的请求：

通过这个流程，您将拥有一个整洁有序的收藏集，您的请求将安全存储，随时可以通过选择“收藏”选项卡进行访问。

传递查询参数

查询参数对于许多API调用非常重要，因为它们允许您过滤、排序或分页检索的数据。让我们来探索如何使用Thunder Client传递查询参数：

点击查询选项卡以输入每个查询参数的参数和值，URL将相应更新。

在查询选项卡中，您会找到可以添加查询参数及其对应值的字段。您需要为每个参数输入参数名称和所需值。

在“查询”选项卡中，我们有字段可以轻松地添加查询参数及其对应的值。我们只需输入参数名称和每个参数的关联值即可。

例如，如果我们打算根据特定类别筛选产品，将结果限制为10个项目，并跳过前几个，我们的查询参数可能包括：

• q:搜索查询，例如“手机”

• limit:要检索的最大项目数量，假设为10

• skip:跳过的项目数量，可以是0（在这种情况下，没有跳过任何项目）

• select:我们想从响应中选择的字段，可能是“标题”和“价格”。

每次我们添加参数和值，Thunder Client都会自动更新URL以反映我们的选择。

在我们的例子中，URL 将会被更新为类似以下的内容：

https://dummyjson.com/products/search?q=phone&limit=10&skip=0&select=title,price

这个URL现在准确地列出了我们的特定查询参数，表明我们正在寻找带有查询词“手机”的产品，限制我们的响应为10个项目，不跳过任何项目，并且仅关注响应中的“标题”和“价格”字段。

通过以这种方式利用查询参数的功能，我们可以精确调整从API检索到的数据。这种定制化水平确保我们的前端应用程序高效地接收所需的数据，促进前端和后端系统之间信息的无缝集成。

创建环境变量

在我们继续探索Thunder Client的功能时，现在我们将把注意力转向利用测试来动态设置环境变量。这种动态的方法使我们能够根据我们从API调用中收到的响应做出反应，从而实现自动化流程并提高API测试和集成的效率。

让我们首先回顾一下之前创建的环境。为了做到这一点，您可以导航到环境设置并添加一个名为 token 的新变量。虽然我们暂时不会设置值，但很快我们将看到测试在这种情况下起到的作用。

转到“收集设置”选项卡，我们将深入研究“测试”部分。在这个区域，我们将创建测试，以便根据从API收到的响应动态设置 token 变量。以下是您可以逐步设置这些测试的方法：

• 在“测试”选项卡中，我们有“选择”，“操作”和“值”的字段。在“选择”字段中，选择 responseBody 。

• 对于“action”，选择 contains 。这意味着我们正在检查响应体是否包含名为“token”的属性。

• 在“value”字段中输入 token 。基本上，我们验证响应体是否包含“token”属性。

在下一步中，我们将根据我们收到的响应设置环境变量 token 。要实现这一点，请按照以下说明进行操作：

• 在下一组字段中，选择“设置环境变量”下拉选项（操作将自动变为“设置为”）。

• 在左侧输入框中输入 json.token 。这表示我们正在从JSON响应中检索“token”键的值。

• 在“value”字段中输入 {{token}} 。这将有效地将检索到的值分配给 token 环境变量，使其可以在后续请求中使用。

有关如何使用测试和环境的更多信息，请参阅文档。

https://github.com/rangav/thunder-client-support#set-environment-variable

现在，让我们发起一个登录请求，这将设置这个变量。在集合选项卡中点击集合上的选项按钮，创建一个新的请求，给它一个名称，例如“登录用户”，将类型设置为 POST ，将URL设置为“
https://dummyjson.com/auth/login”。请求体应包含以下对象：

{
  "username": "kminchelle",
  "password": "0lelplR",
  "expiresInMins": 60
}

现在，当我们发送请求时，我们应该收到一个响应，它应该看起来像这样，包含 token 。

现在是自动化的魔力时刻。由于我们之前设置的测试，令牌值可以自动从响应中提取并设置在我们的环境中。以下是这个过程的工作原理：

• 根据我们之前进行的测试结果，我们检测到响应中的令牌值并自动提取出来。

• Thunder Client的测试然后继续在我们之前创建的环境中设置 token 变量的值。

这个无缝的过程确保提取的令牌值自动在 token 环境变量中可用，以便在后续请求中使用。现在令牌已经安全存储，我们可以继续进行API测试，每当需要身份验证时使用该令牌。

使用令牌变量进行身份验证请求

通过我们自动登录请求无缝设置的环境变量 token ，我们现在可以轻松地进行身份验证请求。要实现这一点，请按照以下步骤操作：

• 在您的集合中创建一个新的请求，或选择一个现有的请求来添加身份验证。

• 导航到请求编辑器的身份验证选项卡。

• 在Bearer Token字段中输入 {{token}} 。当请求发送时，Thunder Client将自动用环境中的实际令牌值替换此占位符。

  
  

通过在Bearer Token字段中加入 {{token}} 变量，Thunder Client确保您的请求能够无缝进行身份验证，从而使您的前端应用程序能够安全地访问受保护的资源。

代码片段和类型生成的生产力

Thunder Client不仅简化了测试过程，还通过提供代码片段和为API请求生成类型，显著提高了生产力。

要在Thunder Client上获取代码片段，请按照以下步骤进行：

• 导航到您执行的请求的结果选项卡。

• 点击标签右侧的 {} 符号。这个动作会显示出用多种语言编写的请求代码片段，比如C、JavaScript、Swift等等。

• 如果你正在使用JavaScript，你还可以选择使用Fetch、Axios和其他流行的库。

  
  

生成类型

除了代码片段，Thunder Client还提供了“生成类型”功能。该功能会自动为API返回的数据生成类型，使得将API响应无缝集成到前端应用程序中变得更加容易。

• 在“结果”选项卡中，寻找位于代码片段选项卡旁边的“生成类型”按钮。

• 点击“生成类型”以根据API响应结构生成必要的类型定义。

  
  

通过提供代码片段和类型生成，Thunder Client使开发人员能够快速将API功能集成到他们的项目中，促进高效开发，减少手动编码和类型推断所花费的时间。

现在，我们可以通过在新请求的Auth选项卡中的Bearer Token字段中添加该令牌变量来进行身份验证请求。

太棒了。接下来，我们将看看Thunder客户端如何通过提供各种语言和框架的请求代码以及生成类型来极大地提高生产力，以实现无缝集成。

使用Thunder Client CLI

要开始，请全局安装扩展

npm i -g @thunderclient/cli

注意1：如果您在扩展中使用Thunder Client设置，请确保它们在 workspace 范围内，以便CLI可以访问它们。

注意2：请确保命令是从项目的根目录运行的。

为了有效地使用Thunder Client CLI，我们需要：

• Node.js 16或更高版本：CLI依赖于Node.js。

• 更新的Thunder Client扩展

另外，还有几件事需要考虑：

• 工作区 Thunder Client 设置：如果您之前在 Thunder Client 扩展中配置了设置，重要的是确保这些设置适用于工作区。

• 项目根目录：在使用Thunder Client CLI时，建议从项目的根目录执行命令。

执行请求

我们可以通过运行命令来执行保存的请求：

tc <Request Name>

例如，要运行之前保存的“获取产品”请求，我们运行：

tc "GET products"

有了这个，我们应该在终端上看到响应

可以使用ID或部分名称执行请求。

控制输出数据

在Thunder Client CLI中，我们可以使用 --log 参数来控制请求的输出。这个参数使我们能够指定我们想要在输出中包含请求数据的哪些元素。

让我们来探讨一下如何管理请求的输出：` --log `参数接受一个由逗号分隔的选项列表，每个选项对应请求数据的不同方面。以下是可用选项的详细说明：

• 0: 所有数据

• 1：请求头部

• 2：请求主体

• 6：响应头部

• 7: 响应主体

• 8：测试

为了定制输出，我们可以使用 --log 参数和所需的选项。例如，如果我们希望在输出中只看到请求头、请求体和响应体，我们可以执行类似以下命令的操作：

tc 'requestNameOrId' --log 1,2,7

例如，要仅获取请求和响应头，我们可以运行以下命令：

tc "GET products" --log 1, 6

有了这个，我们应该有这样的东西：

这个命令可以根据我们指定的偏好来定制输出，让我们能够专注于相关的细节。

在收藏夹中运行：执行多个请求

Thunder Client CLI允许我们使用一个命令执行集合中的所有请求：

tc --col 'colNameOrId'

例如：

tc --col 'Thunder Tests'

在这里，它运行请求，运行在集合中定义的测试，并生成报告。

环境：指定不同的环境

我们可以使用 --env 参数来指定运行请求的不同环境

tc --col 'colNameOrId' --env 'Staging'

报告：生成详细报告

Thunder Client CLI可以生成各种格式的报告，如XML、HTML、JSON和CSV：

tc --col 'colNameOrId' --report xml,html

例如，我们可以为我们的“Thunder Tests”集合生成一个JSON报告

tc --col 'Thunder Tests' --report json

有了这个，我们应该在项目的根目录下创建一个 ./thunder-reports/ 文件夹中的报告JSON文件

从CLI打开“运行集合”UI：轻松访问集合运行器

我们可以直接从命令行界面使用 --ui 标志打开集合运行器界面

tc --col 'Thunder Tests' --ui

有了这个，我们应该能看到关于收集请求的用户界面报告

列表集合或请求（收藏夹中保存的自定义请求）：快速概述

CLI允许我们列出所有集合或集合中的特定请求：

tc list

有了这个，我们应该就可以了

我们还可以将请求列在一个集合中：

tc list 'Thunder Tests'

现在，这显示了集合中的请求以及它们的类型和ID。

增强cURL命令：方便集成

Thunder Client CLI增强了cURL命令，提供格式化输出和请求历史记录。一个普通的 curl 命令可能是这样的：

curl https://dummyjson.com/products/search?q=phone&select=title%2Cprice

然后我们会得到这个未格式化的响应：

通过 tc 命令，我们可以获得一个更美观、更有用的响应，并将其保存在我们的活动选项卡中

tc curl https://dummyjson.com/products/search?q=phone&select=title%2Cprice

保存请求到收藏夹/文件夹：轻松整理

我们可以使用cURL命令直接将请求保存到集合或文件夹中：

保存到收藏夹：

tc curl 'https://dummyjson.com/products/search?q=phone&select=title%2Cprice' --name 'Search Phone title and Price' --col 'Thunder Tests'

有了这个，我们应该把请求保存并添加到我们的收藏中：

这些功能共同为Thunder Client CLI的能力做出了贡献，在命令行界面中为我们提供了一系列工具，以简化我们的API测试工作流程。

CI/CD集成

将Thunder Client CLI集成到您的CI/CD流水线中，可以实现API测试和报告生成的无缝自动化，支持多种格式。

设置：确保 TC VSCode 设置的作用范围限定在工作区目录内，以保持一致性。

Git同步：启用git同步功能以在构建服务器中启用集合运行器。

报告命令：

tc --col 'ColNameOrId' --report xml,html

该命令执行请求并将报告保存在“thunder-reports”文件夹中。

GitHub Actions 集成

可以使用示例的YAML文件将Thunder Client CLI与GitHub Actions或其他构建流水线集成。

工作空间位置 [可选]

如果需要的话，可以使用 --ws 'fullpathToGitWorkspace' 参数来指定不同的工作空间目录。默认情况下，CLI使用当前工作目录。

失败时停止收集[可选]

为了在请求测试失败时停止其他请求的执行，请使用 --stop-on-fail 参数。

通过将Thunder Client CLI集成到您的CI/CD流程中，您可以轻松自动化API测试，生成全面的报告，并简化您的开发工作流程。

结论

总之，ThunderClient成为了无缝API测试的必备伴侣。它与VSCode的集成提供了一个统一的工作空间，通过消除不断切换应用程序的需求来优化效率。ThunderClient的用户友好设计和轻量级资源需求使其与Postman等替代品区别明显。

从轻松的安装到强大的API测试，ThunderClient提供了一个全面的解决方案。它的多功能性涵盖了基本的请求类型和复杂的设置，采用以用户为中心的方法，使开发人员能够轻松管理头部、参数和响应。此外，ThunderClient的无缝CI/CD集成确保API测试无缝地融入开发流程，提升软件质量。

通过采用ThunderClient，开发人员可以配备一种工具，该工具可以简化API测试，增强开发工作流程，并提高他们所生产软件的信心水平。凭借其直观的界面和可适应的功能，ThunderClient证明了高效、集成的API测试的力量。

由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。