为什么要来到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
微信搜寻【前端全栈开发者】关注这个脱发、摆摊、卖货、继续学习的程序员，第一工夫浏览最新文章，会优先两天发表新文章。关注即可大礼包，准能为你节俭不少钱！