详解利用VSCode REST插件进行API调用的方法-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

相关推荐：《vscode基础使用教程》

为什么要离开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 选项。把鼠标放在上面，然后点击，看看会有什么结果。