为什么要离开IDE来测试新的API？现在你不必了。我们如何获取数据如果你长期从事网页开发，你可能知道我们的很多工作都围绕着数据：读取数据、写入数据、操作数据，并以合理的方式在浏览器中展示在。大部分数据由RESTAPI端点提供。通俗地说：我们想要的数据存在于其他服务或数据库中，我们的应用程序查询服务来检索数据，并根据自己的需要使用数据。.过去，为了在连接UI以接受数据之前测试RESTAPI，您通常必须从终端通过命令行查询API，或者使用像Insomnia或Postman这样的GUI（我在之前的文章中对它们进行了比较博客）。但是现在，如果您使用VSCode（为什么不，在其中编写代码多好啊！），生活会变得更轻松。我们不再需要退出IDE来测试API，因为已经有一个插件：RESTClient[1]。使用REST客户端非常简单，我将向您展示这个插件是多么简单和功能齐全。认识VSCodeREST客户端插件多年来我一直是VSCode代码编辑器的粉丝，每次我听说有人创建了一个新的有用的插件并将其添加到VSCode市场时，我都非常高兴感激的。因此，当我决定每次需要测试新的API路由时启动Postman或Insomnia都很痛苦时，我发现RESTClient插件使所有这些都变得不必要了。RESTClient是迄今为止最明显的工具名称，其VSCode市场描述准确地总结了其功能：“RESTClient允许您直接在VisualStudioCode中发送HTTP请求和查看响应。”就那么简单。然后它提供了大量的细节和如何使用它的示例，但实际上，它是VSCode中内置的HTTP工具。让我们开始吧。安装RESTClient找到它，在VSCode中打开市场扩展（左侧面板上的俄罗斯方块小图标），在搜索栏中输入“restclient”，然后安装列表中的第一个结果（作者应该是HuachaoMao).安装完成后，我们可以继续设置。设置REST客户端脚本只是在项目的根目录中创建一个以.http结尾的文件，REST客户端识别这一点并且知道它应该能够从该文件运行HTTP请求。测试时，我拿了一个几年前做的docker化的全栈MERN登录应用，在项目文件夹的根目录下拖放了一个我命名为test.http的文件。测试一下：基本操作这是很酷的部分：根据我的经验，这个小的REST客户端插件可以完成与更复杂的API客户端（如Postman）一样多的功能。下面，我将向您展示如何执行每种类型的基本CRUD操作，以及如何使用我在本地运行的MERN用户注册应用程序来指向调用，从而进行需要身份验证的API调用（如JWT令牌）。POST示例我将介绍的第一个示例是REST客户端的POST，因为用户必须先在我的应用程序中注册，然后才能执行任何其他操作（毕竟它只是一个登录服务）。因此，该代码将出现在test.http文件中。好的，让我们回顾一下上面的代码片段中发生了什么。为了正常工作，REST客户端首先需要的是请求的类型和它试图访问的路由的完整URL路径。在这种情况下，请求是一个POST，URL是http://localhost:3003/registerUser。第一行末尾的HTTP/1.1与RFC2616建立的标准有关，但我不确定是否有必要，所以为了安全起见，我将其保留。然后，由于这是一个POST，在请求中包含一个JSON正文，并注意在Content-Type和正文之间有一个空行——这是REST客户端有意要求的。所以，我们填写必填字段，POST上应该有一个小的发送请求选项。将鼠标放在它上面并单击以查看会发生什么。您应该注意的最后一件事是test.http文件中请求之后的###，这是请求之间的分隔符，通过在每个请求之间插入###，您可以在文件中拥有任意数量的请求。如果请求成功，您会看到类似于我在上面发布的内容。即使请求不成功，您仍会获得有关刚刚发生的事情以及（希望如此）出了什么问题的所有信息。很酷的GET示例现在已经创建了一个用户，假设我们忘记了他们的密码，他们发送了一封电子邮件来找回密码。该电子邮件包含一个令牌和一个链接，可将他们带到一个页面以重置其密码。一旦他们单击链接并登陆页面，就会启动GET请求以确保电子邮件中包含的用于重置密码的令牌有效，这就是它可能看起来的样子。我的GET指向/reset端点并附加在服务器端进行身份验证所需的resetPasswordToken查询参数。Content-Type仍然是application/json，底部的###将此请求与文件中的任何其他请求分开。如果令牌确实有效，服务器的响应如下所示：这就是GET请求所需的全部内容，他们不必担心请求主体。Update示例后面是U:CRUD中的Update。假设用户想要更新其个人资料信息中的某些内容。使用RESTClient也不难。对于此请求，请求类型更新为PUT，正文包括对象上需要更新的任何字段。在我的应用程序中，用户可以更新他们的名字、姓氏或电子邮件。如果REST客户端在传递文本时成功命中PUT端点，那么这就是VSCode中“响应”选项卡的样子。顺便说一句，让我们继续进行身份验证示例。因为据我所知，很少有应用程序没有需要某种身份验证的受保护路由。身份验证示例REST客户端支持的不同身份验证格式的广度再一次给我留下了深刻的印象。在撰写本文时，REST客户端的文档说它支持六种流行的身份验证类型，包括对JWT身份验证的支持，这是我的应用程序依赖于所有受保护路由的方式。因此，事不宜迟，这是我需要验证的端点之一：在数据库中查找用户信息。在REST客户端请求中添加授权非常简单：只需在声明路由和内容类型的下方添加密钥授权，然后（至少在我的情况下）我添加JWT密钥和值（因为它们出现在浏览器的本地存储）作为授权标头的值。这样就变成了：Authorization:jwtXXXXXXXXXXXXXXXXXX然后发送请求，看看会发生什么。如果您的身份验证配置正确，您将从服务器收到某种类型的200响应，对于我的请求，它将返回数据库中存储的与该用户相关的所有信息，以及一个信息。这部分可能需要一些试验和错误，但如果您可以通过现有的Swagger端点或其他类似文档，在浏览器的DevTools网络调用中找出成功请求的方式，那将是非常值得的。删除示例通过我上面提供的其他示例，这个示例应该很简单。DELETE需要的查询参数是username，这样它就知道要删除数据库中的哪个用户，同时还需要验证这个用户是否有资格发出这个请求。除此之外，这里没有太多新内容要介绍。这实际上只是REST客户端功能的冰山一角。我介绍了REST请求和一种身份验证形式，但它还可以支持GraphQL请求、多种其他类型的身份验证、环境和自定义变量、查看和保存原始响应等。我强烈建议查看文档以了解有关RESTClient的所有信息，它非常强大。REST客户端文档：https://marketplace.visualstudio.com/items?itemName=humao.rest-client数据驱动互联网，随着您职业生涯的进一步发展，Web开发人员最终会非常擅长访问数据并将其转换为满足您的需求。以前，在获取托管在别处的数据时，Web开发人员通常会求助于Postman或Insomnia等工具，以获得比命令行稍微好一点的界面，但现在有一个VSCode插件可以让代码编辑器的其他要求成为过去，它叫做RESTClient，它很棒。增删改查操作？没问题！GraphQL支持？没问题！身份验证选项？我肯定会在未来的项目中更多地使用它。请在几周后回来查看-我将写更多关于JavaScript、React、ES6或与Web开发相关的任何其他内容。感谢您阅读。我希望您会考虑使用RESTClient来处理您将来可能需要执行的任何API查询，我认为您会对它提供的愉快体验感到惊喜，而无需任何APIGUI。🙂原文：https://blog.bitsrc.io/vs-codes-rest-client-plugin-is-all-you-need-to-make-api-calls-e9e95fcfd85a作者：PaigeNiedringhaus本文转载自微信公众号《前端全栈开发》，可以通过以下二维码关注。转载本文请联系前端全栈开发公众号。
