詳解利用VSCode REST插件進行API呼叫的方法

相關推薦：《vscode基礎使用教程》

為什麼要離開IDE去測試新的API？現在你不必這樣做了。

我們如何取得資料

如果你已經做了很長時間的網路開發，你可能知道我們的許多工作都是圍繞著資料展開的：讀取數據、寫入數據、操作數據，並以合理的方式在瀏覽器中顯示出來。

而這些數據絕大部分都是由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，這樣它就知道到底要刪除資料庫中的哪個用戶，而且還需要驗證這個用戶是否有資格提出這個要求。除此之外，這裡就沒有其他的新東西可以介紹了。

#########

This is actually just the tip of the iceberg of what REST Client can do. I covered REST requests and one form of authentication, but it can also support GraphQL requests, multiple other types of authentication, environment and custom variables, viewing and saving raw responses, and more.

I highly recommend you check out the documentation to understand all the features of the REST Client, it is very powerful.

REST Client documentation: https://blog.bitsrc.io/vs-codes-rest-client-plugin-is-all-you-need-to-make-api-calls-e9e95fcfd85a

End

Data drives the internet, and as they progress further in their careers, web developers eventually become very good at accessing and transforming data to Meet your own needs.

Previously, when getting data hosted elsewhere, web developers would often turn to tools like Postman or Insomnia to have a slightly better interface than the command line, but now there's a VS Code plugin , which makes the need for code editors a thing of the past. It’s called REST Client, and it’s great.

CRUD operation? no problem! Support GraphQL? no problem! Authentication options? no problem! REST Client provides all these options and more, and is very simple to set up and use. I'll definitely be using it more in future projects.

Please check back in a few weeks – I’ll be writing more about JavaScript, React, ES6, or anything else related to web development.

Thank you for reading. I hope you will consider using the REST Client to handle any API queries you may need to do in the future, I think you will be pleasantly surprised by the pleasant experience it can provide, without the need for any API GUI.

Original address: https://blog.bitsrc.io/

Author: Paige Niedringhaus

Translation address: https://segmentfault.com/a /1190000038223490

For more programming-related knowledge, please visit: Programming Learning Course! !

以上是詳解利用VSCode REST插件進行API呼叫的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！