为什么要来到 IDE 去测试新的 API？当初你不用这样做了。
咱们如何获取数据
如果你曾经做了很长时间的 Web 开发，你可能晓得咱们的很多工作都是围绕着数据开展的：读取数据、写入数据、操作数据，并以正当的形式在浏览器中显示进去。
而这些数据绝大部分都是由 REST API 端点提供的，艰深地说：咱们想要的数据存在于其余服务或数据库中，咱们的应用程序查问该服务来检索数据，并依据本人的须要应用数据。
在过来，为了在连贯 UI 以承受数据之前测试 REST API，通常必须通过终端的命令行查问 API，或者应用像 Insomnia 或 Postman 这样的 GUI(我在之前的博客中对它们进行了比拟)。
但当初，如果你应用 VS Code（为什么不呢，用它写代码多好啊！），生存就变得简略了。咱们不再须要退出 IDE 来测试 API，因为当初曾经有一个插件能够做到这一点：REST Client。
应用 REST Client 是非常简单的，我将向您展现这个插件是如许简略，而且功能齐全。
意识 VS Code REST Client 插件
我是 VS Code 这个代码编辑器的粉丝，曾经有好几年了，每次得悉有人创立了一个新的有用的插件并增加到 VS Code 市场，我都会无比感谢。
所以当我决定每次须要测试一个新的 API 路由时，都要启动 Postman 或 Insomnia 是一件很苦楚的事件，我发现了 REST Client 这个插件，能够让这所有变得不必要。
REST Client 是迄今存在的工具的最显著名称，其 VS Code 市场形容精确地概括了其性能：“REST Client 容许您发送 HTTP 申请并间接在 Visual Studio Code 中查看响应。”
就这么简略。而后，它会提供大量的详细信息以及应用办法的示例，但实际上，它是 VS Code 中内置的 HTTP 工具。因而，让咱们开始应用它。
装置 REST Client
要找到它，关上 VS Code 中的市场扩大（左侧面板上的俄罗斯方块小图标），在搜寻栏中输出“rest client”，而后装置列表中的第一个后果（作者应该是 Huachao Mao）。
装置实现后，咱们能够持续进行设置。
设置 REST Client 脚本
只需在我的项目的根目录下创立一个以 .http 结尾的文件，REST Client 能够辨认出这一点，并且晓得它应该可能运行来自该文件的 HTTP 申请。
在测试的时候，我把几年前做的一个 docker 化的全栈 MERN 登录利用，把一个我命名为 test.http 的文件丢到我的项目文件夹的根目录。
测试一下：基本操作
这是很酷的局部：在我的教训中，这个小小的 REST Client 插件可能做的事件和 Postman 等更简单的 API 客户端一样多。
上面，我将向你展现如何进行每一种类型的根本 CRUD 操作，再加上如何像 JWT 令牌一样进行须要认证的 API 调用，应用我在本地运行的 MERN 用户注册利用来指向调用。
POST 示例
我将介绍的第一个示例是 REST Client 的 POST，因为用户在我的应用程序中必须先注册能力进行其余任何操作（毕竟，这只是一个登录服务）。
因而，该代码将在 test.http 文件中显示。
好的，让咱们回顾一下下面的代码片段中产生的事件。
REST Client 为了失常工作所须要的第一件事是发出请求的类型及其尝试拜访的路由的残缺 URL 门路。在这种状况下，申请是 POST，URL 是 http://localhost:3003/registerUser。第一行开端的 HTTP/1.1 与 RFC 2616 建设的规范无关，然而我不确定是否有必要，因而我将其保留只是为了平安。
而后，因为这是一个 POST，所以在申请中要蕴含一个 JSON 体，留神 Content-Type 和 body 之间有一行空行——这是 REST Client 无意要求的。所以，咱们把所需的字段填好，而后，在 POST 下面应该会呈现一个小小的 send Request 选项。把鼠标放在下面，而后点击，看看会有什么后果。
您最初要留神的是 test.http 文件中申请后的 ###，这是申请之间的分隔符，只有在每个申请之间插入 ### 就能够在文件中蕴含任意数量的申请。
如果申请胜利，您将看到与我下面公布的内容相似的内容。即便申请不胜利，你依然会失去所有这些对于方才产生的信息，以及（心愿）出了什么问题。爽啊
GET 示例
当初曾经创立了一个用户，比方说咱们遗记了他们的明码，他们发了一封邮件来找回明码。电子邮件中蕴含令牌和链接，该链接会将他们带到页面以重置明码。
一旦他们点击了链接并登陆页面，一个 GET 申请就会被启动，以确保邮件中蕴含的用于重置明码的令牌是无效的，这就是它可能的样子。
我的 GET 指向了 /reset 端点，并在服务端附加了验证所需的 resetPasswordToken 查问参数。Content-Type 仍为 application/json，底部的 ### 将此申请与文件中的任何其余申请离开。
如果令牌的确无效，则服务器的响应如下所示：
而这就是 GET 申请所须要的全部内容，他们不必放心申请体的问题。
Update 示例
接下来是 CRUD 中的 U：更新。假如用户想更新其个人资料信息中的某些内容。应用 REST Client 也不难。
对于这个申请，申请类型更新为 PUT，body 包含该对象上须要更新的任何字段。在我的应用程序中，用户能够更新其名字，姓氏或电子邮件。
因而，在传递注释时，如果 REST Client 胜利击中 PUT 端点，则这就是 VS Code 中的 Response 选项卡的样子。
到此为止，让咱们持续进行身份验证示例。因为据我所知，没有爱护路由的应用程序很少，须要某种认证。
Authentication 示例
REST Client 反对的不同身份验证格局的广度再一次让我印象粗浅。在撰写本文时，REST Client 的文档说它反对六种风行的身份验证类型，包含对 JWT 身份验证的反对，这是我的应用程序在所有受爱护的路由上都依赖的身份验证类型。
因而，事不宜迟，这里是我须要验证的端点之一：在数据库中查找用户的信息。
在 REST Client 申请中增加受权真的很简略：简略地在路由和 content-type 被申明的中央上面增加键 Authorization，而后（至多对我的状况而言）我增加 JWT 的键和值（因为它们呈现在浏览器的本地存储中）作为 Authorization 头的值。
这样就变成了：
Authorization: jwt XXXXXXXXXXXXXXXXXX而后只需发送申请，看看会产生什么。
如果您的身份验证配置正确，您将收到来自服务器的某种类型的 200 响应，对于我的申请，它将返回存储在数据库中的与该用户相干的所有信息，以及一个胜利找到该用户的音讯。
这部分可能须要一些尝试和谬误，但如果您可能弄清楚一个胜利的申请是如何在浏览器的 Dev Tools 网络调用中收回的，通过现有的 Swagger 端点，或者通过其余相似的文档，这是十分值得的。
DELETE 示例
通过我下面提供的其余例子，这个示例应该很简略
这个 DELETE 须要的查问参数是 username，这样它就晓得到底要删除数据库中的哪个用户，而且还须要验证这个用户是否有资格提出这个申请。除此以外，这里就没有什么其余的新货色能够介绍了。
这实际上只是 REST Client 能够做的冰山一角。我涵盖了 REST 申请和一种模式的认证，但它也能够反对 GraphQL 申请、多种其余类型的认证、环境和自定义变量、查看和保留原始响应等等。
我强烈建议您查阅文档，以理解 REST Client 的所有性能，它十分弱小。
REST Client 文档：https://marketplace.visualstu…
完结
数据驱动着互联网，而随着职业生涯的进一步倒退，Web 开发人员最终会变得十分长于拜访和转换数据以满足本人的需要。
以前，当获取托管在其余中央的数据时，Web 开发人员常常会求助于 Postman 或 Insomnia 这样的工具，以领有比命令行略微好一点的界面，但当初有一个 VS Code 插件，它让代码编辑器之外的需要成为了过来，它叫 REST Client，十分棒。
CRUD 操作？没问题！反对 GraphQL？没问题！认证选项？没问题！REST Client 提供了所有这些选项以及更多，而且设置和应用起来非常简单。我必定会在当前的我的项目中更多地应用它。
请过几周再回来看看——我将写更多无关 JavaScript，React，ES6 或其余与 Web 开发相干的内容。
谢谢你的浏览。我心愿你能思考用 REST Client 来解决你将来可能须要做的任何 API 查问，我想你会对它能提供的欢快体验感到惊喜，不须要任何 API GUI。????
原文：https://blog.bitsrc.io/
作者：Paige Niedringhaus
微信搜寻【前端全栈开发者】关注这个脱发、摆摊、卖货、继续学习的程序员，第一工夫浏览最新文章，会优先两天发表新文章。关注即可大礼包，准能为你节俭不少钱！