VSCode REST 플러그인을 사용하여 API 호출을 수행하는 방법에 대한 자세한 설명

관련 추천: "vscode 기본 사용법 튜토리얼"

새로운 API를 테스트하기 위해 IDE를 떠나야 하는 이유는 무엇입니까? 이제는 그럴 필요가 없습니다.

데이터를 얻는 방법

오랫동안 웹 개발을 해오셨다면 아마도 우리 작업의 많은 부분이 데이터를 중심으로 이루어진다는 것을 아실 것입니다. 데이터 읽기, 데이터 쓰기, 데이터 조작, 브라우저에 표시하기 합리적인 방식으로.

그리고 이 데이터의 대부분은 REST API 엔드포인트에서 제공됩니다. 즉, 우리가 원하는 데이터는 다른 서비스나 데이터베이스에 존재하며, 애플리케이션은 해당 서비스에 쿼리하여 데이터를 검색하고 필요에 따라 검색합니다. .

과거에는 데이터를 받기 위해 UI에 연결하기 전에 REST API를 테스트하려면 일반적으로 터미널의 명령줄을 통해 API를 쿼리하거나 Insomnia 또는 Postman과 같은 GUI를 사용해야 했습니다. 이전 블로그).

하지만 이제 VS Code를 사용하면(왜 안되나요, 그걸로 코드를 작성하는 게 너무 좋아요!) 생활이 단순해집니다. API를 테스트하기 위해 더 이상 IDE를 종료할 필요가 없습니다. 이제 이를 수행할 수 있는 플러그인인 REST 클라이언트가 있기 때문입니다.

REST 클라이언트를 사용하는 것은 매우 쉽습니다. 이 플러그인이 얼마나 간단하면서도 완벽하게 작동하는지 보여드리겠습니다.

VS Code REST 클라이언트 플러그인을 만나보세요

저는 수년 동안 코드 편집기인 VS Code의 팬인데, 누군가가 새롭고 유용한 플러그인을 만들어 VS Code 마켓에 추가했다는 소식을 접할 때마다 , 나는 그들 모두 매우 감사할 것입니다.

그래서 새로운 API 경로를 테스트해야 할 때마다 Postman이나 Insomnia를 시작하는 것이 고통스럽다고 판단했을 때 이를 불필요하게 만드는 REST 클라이언트 플러그인을 발견했습니다.

REST 클라이언트는 현재 존재하는 도구의 가장 확실한 이름이며 VS Code 마켓플레이스 설명은 해당 기능을 정확하게 요약합니다. "REST 클라이언트를 사용하면 Visual Studio Code에서 직접 HTTP 요청을 보내고 응답을 볼 수 있습니다." 그것은 매우 간단합니다. 그런 다음 이를 사용하는 방법에 대한 많은 세부 정보와 예제를 제공하지만 실제로는 VS Code에 내장된 HTTP 도구입니다. 그럼 사용을 시작해 보겠습니다.

REST 클라이언트 설치

이를 찾으려면 VS Code에서 Market 확장 프로그램(왼쪽 패널의 작은 Tetris 아이콘)을 열고 검색 창에 "rest client"를 입력한 후 목록의 첫 번째 클라이언트를 설치하세요. 결과 (저자는 Huachao Mao여야 합니다).

설치가 완료되면 설정을 계속할 수 있습니다.

REST 클라이언트 스크립트 설정

프로젝트 루트에 .http로 끝나는 파일을 생성하기만 하면 REST 클라이언트가 이를 인식하고 해당 파일에서 파일을 실행할 수 있어야 한다는 것을 알고 있습니다. 파일에 대한 HTTP 요청입니다.

테스트 중에 저는 몇 년 전에 만든 도커화된 풀 스택 MERN 로그인 애플리케이션을 가져와 test.http라는 파일을 프로젝트 폴더의 루트 디렉터리에 놓았습니다. .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

🎜🎜🎜 테스트해 보세요: 기본 작업 🎜🎜🎜멋진 부분은 다음과 같습니다. 내 경험에 따르면 이 작은 REST 클라이언트 플러그인은 Postman과 같은 더 복잡한 API 클라이언트만큼 많은 작업을 수행할 수 있습니다. 🎜🎜 아래에서는 각 유형의 기본 CRUD 작업을 수행하는 방법과 호출을 지정하기 위해 로컬로 실행되는 MERN 사용자 등록 앱을 사용하여 JWT 토큰으로 인증이 필요한 API 호출을 만드는 방법을 보여 드리겠습니다. 🎜🎜🎜POST 예제🎜🎜🎜내가 다룰 첫 번째 예제는 REST 클라이언트의 POST입니다. 사용자가 내 애플리케이션에서 다른 작업을 수행하기 전에 등록해야 하기 때문입니다(결국 이것은 단지 로그인일 뿐입니다). 서비스). 🎜🎜따라서 test.http 파일에 코드가 표시됩니다. 🎜🎜🎜🎜알겠습니다 좋습니다. 위의 코드 조각에서 무슨 일이 일어나고 있는지 검토해 보겠습니다. 🎜🎜REST 클라이언트가 제대로 작동하기 위해 가장 먼저 필요한 것은 요청 유형과 액세스하려는 경로의 전체 URL 경로입니다. 이 경우 요청은 POST이고 URL은 http://localhost:3003/registerUser입니다. 첫 번째 줄 끝의 HTTP/1.1은 RFC 2616에서 제정한 표준과 관련이 있지만 꼭 필요한지는 잘 모르겠으므로 안전을 위해 그대로 두겠습니다. 🎜🎜그런 다음 POST이므로 요청에 JSON 본문이 포함되어야 합니다. Content-Type과 body 빈 줄 1개 - 이는 REST 클라이언트에서 의도적으로 필요합니다. 따라서 필수 필드를 입력하면 <code>POST 위에 작은 요청 보내기 옵션이 나타납니다. 그 위에 마우스를 놓고 클릭하면 무슨 일이 일어나는지 확인하실 수 있습니다. 🎜

마지막으로 주의해야 할 것은 test.http 파일에서 요청 뒤의 ###입니다. 이는 요청 사이의 구분 기호입니다. 요청 사이에 ###를 삽입하여 파일에 요청 수에 제한 없이 포함할 수 있습니다. 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

요청이 성공하면 위에 게시한 내용과 비슷한 내용이 표시됩니다. 요청이 실패하더라도 방금 발생한 일과 무엇이 잘못되었는지에 대한 모든 정보를 얻을 수 있습니다. Cool

GET 예시

이제 사용자가 생성되었습니다. 비밀번호를 잊어버렸고 비밀번호를 찾기 위해 이메일을 보냈다고 가정해 보겠습니다. 이메일에는 토큰과 비밀번호를 재설정할 수 있는 페이지로 연결되는 링크가 포함되어 있습니다. 🎜링크를 클릭하고 페이지에 접속하면 이메일에 포함된 비밀번호를 재설정하기 위한 토큰이 유효한지 확인하기 위해 GET 요청이 시작됩니다. 🎜🎜🎜🎜나 GET는 /reset 엔드포인트를 가리키며 서버 측 확인에 필요한 resetPasswordToken 쿼리 매개변수를 추가합니다. Content-Type은 여전히 ​​application/json이며, 하단의 ###는 이 요청을 파일의 다른 요청과 구분합니다. 🎜🎜토큰이 실제로 유효한 경우 서버의 응답은 다음과 같습니다. 🎜🎜🎜🎜이것이 GET 요청에 필요한 모든 콘텐츠이므로 요청 본문에 대해 걱정할 필요가 없습니다. 🎜

업데이트 예시

🎜 다음은 U: CRUD 업데이트입니다. 사용자가 프로필 정보의 내용을 업데이트하려고 한다고 가정해 보겠습니다. REST 클라이언트를 사용하는 것도 어렵지 않습니다. 🎜🎜🎜🎜For 이 요청의 경우 요청 유형이 PUT으로 업데이트되고 본문에는 객체에서 업데이트해야 하는 모든 필드가 포함됩니다. 내 애플리케이션에서 사용자는 이름, 성 또는 이메일을 업데이트할 수 있습니다. 🎜🎜따라서 본문을 전달하는 동안 REST 클라이언트가 PUT 엔드포인트에 성공적으로 도달하면 VS Code의 응답 탭은 다음과 같습니다. 🎜🎜🎜🎜To 이를 마치고 인증 예제로 넘어가겠습니다. 내가 아는 한 일종의 인증이 필요한 보호된 라우팅이 없는 애플리케이션은 거의 없기 때문입니다. 🎜

인증 예

🎜REST 클라이언트가 지원하는 다양한 인증 형식에 다시 한 번 깊은 인상을 받았습니다. 이 글을 쓰는 시점에서 REST 클라이언트 문서에는 JWT 인증 지원을 포함하여 6가지 인기 있는 인증 유형을 지원한다고 나와 있습니다. JWT 인증은 내 애플리케이션이 모든 보호된 경로에 의존하는 인증 유형입니다. 🎜🎜그러므로 더 이상 고민하지 말고 유효성을 검사해야 하는 엔드포인트 중 하나는 다음과 같습니다. 데이터베이스에서 사용자 정보를 검색하는 것입니다. 🎜🎜🎜🎜at REST 클라이언트 요청에 인증을 추가하는 것은 정말 쉽습니다. 경로와 콘텐츠 유형이 선언된 위치 아래에 Authorization 키를 추가한 다음 (적어도 제 경우에는) JWT 키와 값을 추가하기만 하면 됩니다. ​​(브라우저의 로컬 저장소에 표시되는 대로)를 Authorization 헤더의 값으로 사용합니다. 🎜🎜다음과 같이 됩니다. 🎜rrreee🎜그런 다음 요청을 보내고 무슨 일이 일어나는지 확인하세요. 🎜🎜인증이 올바르게 구성되면 서버로부터 일종의 200 응답을 받게 되며 내 요청에 대해 해당 사용자와 관련된 데이터베이스에 저장된 모든 정보가 반환되고 해당 사용자의 메시지가 성공적으로 검색됩니다. 🎜🎜이 부분에는 약간의 시행착오가 필요할 수 있지만 브라우저의 개발자 도구 네트워크 호출, 기존 Swagger 엔드포인트 또는 기타 유사한 문서를 통해 요청이 어떻게 성공적으로 이루어지는지 알아낼 수 있다면 매우 가치가 있습니다. 🎜

예제 삭제

🎜위에 제공한 다른 예에 이어 이 예는 간단해야 합니다🎜🎜🎜🎜 DELETE에 필요한 쿼리 매개변수는 username를 사용하여 데이터베이스에서 삭제할 사용자를 정확히 알고 이 사용자가 이 요청을 할 자격이 있는지도 확인해야 합니다. 그 외에는 새로 소개할 내용이 없습니다. 🎜🎜🎜🎜<p>이것은 REST 클라이언트가 할 수 있는 일 중 실제로 빙산의 일각에 불과합니다. REST 요청과 한 가지 인증 형식을 다루었지만 GraphQL 요청, 여러 다른 유형의 인증, 환경 및 사용자 지정 변수, 원시 응답 보기 및 저장 등도 지원할 수 있습니다. </p> <p>REST 클라이언트의 모든 기능을 이해하려면 문서를 확인하는 것이 좋습니다. 이는 매우 강력합니다. </p> <blockquote><p>REST 클라이언트 문서: https://blog.bitsrc.io/vs-codes-rest-client-plugin-is-all-you-need-to-make-api-calls-e9e95fcfd85a</p></blockquote> <h2> <strong>End</strong> </h2> <p>데이터는 인터넷을 주도하며, 경력을 쌓으면서 웹 개발자는 결국 자신의 필요에 맞게 데이터에 액세스하고 변환하는 데 능숙해집니다. </p> <p>이전에는 데이터를 다른 곳에 호스팅할 때 웹 개발자가 명령줄보다 약간 더 나은 인터페이스를 갖기 위해 Postman 또는 Insomnia와 같은 도구를 사용하는 경우가 많았지만 이제는 코드를 작성할 수 있는 VS Code 플러그인이 있습니다. REST 클라이언트라고 불리는 것은 과거의 일이며 훌륭합니다. </p> <p>CRUD 작업? 괜찮아요! GraphQL을 지원하나요? 괜찮아요! 인증 옵션? 괜찮아요! REST 클라이언트는 이러한 모든 옵션과 그 이상을 제공하며 설정 및 사용이 매우 간단합니다. 나는 앞으로의 프로젝트에서 그것을 더 많이 사용할 것입니다. </p> <p>몇 주 후에 다시 확인하세요. JavaScript, React, ES6 또는 웹 개발과 관련된 모든 것에 대해 더 많이 쓸 예정입니다. </p> <p>읽어주셔서 감사합니다. 앞으로 수행해야 할 API 쿼리를 처리하기 위해 REST 클라이언트를 사용하는 것을 고려해 보시길 바랍니다. API GUI 없이도 REST 클라이언트가 제공할 수 있는 즐거운 경험에 놀라실 것이라고 생각합니다. </p> <blockquote> <p>원본 주소: https://blog.bitsrc.io/</p> <p>저자: Paige Niedringhaus</p> <p>번역 주소: https://segmentfault.com/a/1190000038223490</p> </blockquote> <p>더 많은 프로그래밍 관련 지식을 보시려면 방문해주세요. : <a href="https://www.php.cn/course.html" target="_blank" textvalue="编程学习课程">프로그래밍 학습 코스</a>! ! </p>

위 내용은 VSCode REST 플러그인을 사용하여 API 호출을 수행하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!