如何利用VSCode REST插件進(jìn)行API調(diào)用

這篇文章給大家分享的是有關(guān)如何利用VSCode REST插件進(jìn)行API調(diào)用的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

我們?nèi)绾潍@取數(shù)據(jù)

如果你已經(jīng)做了很長時間的Web開發(fā)，你可能知道我們的很多工作都是圍繞著數(shù)據(jù)展開的：讀取數(shù)據(jù)、寫入數(shù)據(jù)、操作數(shù)據(jù)，并以合理的方式在瀏覽器中顯示出來。

而這些數(shù)據(jù)絕大部分都是由REST API端點(diǎn)提供的，通俗地說：我們想要的數(shù)據(jù)存在于其他服務(wù)或數(shù)據(jù)庫中，我們的應(yīng)用程序查詢該服務(wù)來檢索數(shù)據(jù)，并根據(jù)自己的需要使用數(shù)據(jù)。

在過去，為了在連接UI以接受數(shù)據(jù)之前測試REST API，通常必須通過終端的命令行查詢API，或者使用像Insomnia或Postman這樣的GUI(我在之前的博客中對它們進(jìn)行了比較)。

但現(xiàn)在，如果你使用VS Code（為什么不呢，用它寫代碼多好啊?。?，生活就變得簡單了。我們不再需要退出IDE來測試API，因為現(xiàn)在已經(jīng)有一個插件可以做到這一點(diǎn)：REST Client。

使用REST Client是非常簡單的，我將向您展示這個插件是多么簡單，而且功能齊全。

認(rèn)識VS Code REST Client插件

我是VS Code這個代碼編輯器的粉絲，已經(jīng)有好幾年了，每次得知有人創(chuàng)建了一個新的有用的插件并添加到VS Code市場，我都會無比感激。

所以當(dāng)我決定每次需要測試一個新的API路由時，都要啟動Postman或Insomnia是一件很痛苦的事情，我發(fā)現(xiàn)了REST Client 這個插件，可以讓這一切變得不必要。

REST Client是迄今存在的工具的最明顯名稱，其VS Code市場描述準(zhǔn)確地概括了其功能：“REST Client允許您發(fā)送HTTP請求并直接在Visual Studio Code中查看響應(yīng)?！?/p>

就這么簡單。然后，它會提供大量的詳細(xì)信息以及使用方法的示例，但實際上，它是VS Code中內(nèi)置的HTTP工具。因此，讓我們開始使用它。

安裝REST Client

要找到它，打開VS Code中的市場擴(kuò)展（左側(cè)面板上的俄羅斯方塊小圖標(biāo)），在搜索欄中輸入 “rest client”，然后安裝列表中的第一個結(jié)果（作者應(yīng)該是Huachao Mao）。

安裝完成后，我們可以繼續(xù)進(jìn)行設(shè)置。

設(shè)置REST Client腳本

只需在項目的根目錄下創(chuàng)建一個以 .http 結(jié)尾的文件，REST Client可以識別出這一點(diǎn)，并且知道它應(yīng)該能夠運(yùn)行來自該文件的HTTP請求。

在測試的時候，我把幾年前做的一個docker化的全棧MERN登錄應(yīng)用，把一個我命名為 test.http 的文件丟到項目文件夾的根目錄。

測試一下：基本操作

這是很酷的部分：在我的經(jīng)驗中，這個小小的REST Client插件能夠做的事情和Postman等更復(fù)雜的API客戶端一樣多。

下面，我將向你展示如何進(jìn)行每一種類型的基本CRUD操作，再加上如何像JWT令牌一樣進(jìn)行需要認(rèn)證的API調(diào)用，使用我在本地運(yùn)行的MERN用戶注冊應(yīng)用來指向調(diào)用。

POST示例

我將介紹的第一個示例是REST Client的 POST，因為用戶在我的應(yīng)用程序中必須先注冊才能進(jìn)行其他任何操作（畢竟，這只是一個登錄服務(wù)）。

因此，該代碼將在 test.http 文件中顯示。

好的，讓我們回顧一下上面的代碼片段中發(fā)生的事情。

REST Client為了正常工作所需要的第一件事是發(fā)出請求的類型及其嘗試訪問的路由的完整URL路徑。在這種情況下，請求是POST，URL是 http://localhost:3003/registerUser。第一行末尾的 HTTP/1.1 與RFC 2616建立的標(biāo)準(zhǔn)有關(guān)，但是我不確定是否有必要，因此我將其保留只是為了安全。

然后，因為這是一個 POST，所以在請求中要包含一個JSON體，注意 Content-Type 和 body 之間有一行空行——這是REST Client有意要求的。所以，我們把所需的字段填好，然后，在 POST 上面應(yīng)該會出現(xiàn)一個小小的 send Request 選項。把鼠標(biāo)放在上面，然后點(diǎn)擊，看看會有什么結(jié)果。

您最后要注意的是 test.http 文件中請求后的 ### ，這是請求之間的分隔符，只要在每個請求之間插入 ### 就可以在文件中包含任意數(shù)量的請求。

如果請求成功，您將看到與我上面發(fā)布的內(nèi)容類似的內(nèi)容。即使請求不成功，你仍然會得到所有這些關(guān)于剛才發(fā)生的信息，以及（希望）出了什么問題。爽啊

GET示例

現(xiàn)在已經(jīng)創(chuàng)建了一個用戶，比方說我們忘記了他們的密碼，他們發(fā)了一封郵件來找回密碼。電子郵件中包含令牌和鏈接，該鏈接會將他們帶到頁面以重置密碼。

一旦他們點(diǎn)擊了鏈接并登陸頁面，一個 GET 請求就會被啟動，以確保郵件中包含的用于重置密碼的令牌是有效的，這就是它可能的樣子。

我的 GET 指向了 /reset 端點(diǎn)，并在服務(wù)端附加了驗證所需的 resetPasswordToken 查詢參數(shù)。Content-Type 仍為 application/json，底部的 ### 將此請求與文件中的任何其他請求分開。

如果令牌確實有效，則服務(wù)器的響應(yīng)如下所示：

而這就是GET請求所需要的全部內(nèi)容，他們不用擔(dān)心請求體的問題。

Update示例

接下來是CRUD中的U：更新。假設(shè)用戶想更新其個人資料信息中的某些內(nèi)容。使用REST Client也不難。

對于這個請求，請求類型更新為 PUT，body包括該對象上需要更新的任何字段。在我的應(yīng)用程序中，用戶可以更新其名字，姓氏或電子郵件。

因此，在傳遞正文時，如果REST Client成功擊中PUT端點(diǎn)，則這就是VS Code中的Response選項卡的樣子。

到此為止，讓我們繼續(xù)進(jìn)行身份驗證示例。因為據(jù)我所知，沒有保護(hù)路由的應(yīng)用程序很少，需要某種認(rèn)證。

Authentication示例

REST Client支持的不同身份驗證格式的廣度再一次讓我印象深刻。在撰寫本文時，REST Client的文檔說它支持六種流行的身份驗證類型，包括對JWT身份驗證的支持，這是我的應(yīng)用程序在所有受保護(hù)的路由上都依賴的身份驗證類型。

因此，事不宜遲，這里是我需要驗證的端點(diǎn)之一：在數(shù)據(jù)庫中查找用戶的信息。

在REST Client請求中添加授權(quán)真的很簡單：簡單地在路由和 content-type 被聲明的地方下面添加鍵 Authorization，然后（至少對我的情況而言）我添加JWT的鍵和值（因為它們出現(xiàn)在瀏覽器的本地存儲中）作為 Authorization 頭的值。

這樣就變成了：

Authorization: jwt XXXXXXXXXXXXXXXXXX

然后只需發(fā)送請求，看看會發(fā)生什么。

如果您的身份驗證配置正確，您將收到來自服務(wù)器的某種類型的200響應(yīng)，對于我的請求，它將返回存儲在數(shù)據(jù)庫中的與該用戶相關(guān)的所有信息，以及一個成功找到該用戶的消息。

這部分可能需要一些嘗試和錯誤，但如果您能夠弄清楚一個成功的請求是如何在瀏覽器的Dev Tools網(wǎng)絡(luò)調(diào)用中發(fā)出的，通過現(xiàn)有的Swagger端點(diǎn)，或者通過其他類似的文檔，這是非常值得的。

DELETE示例

經(jīng)過我上面提供的其他例子，這個示例應(yīng)該很簡單

這個 DELETE 需要的查詢參數(shù)是 username，這樣它就知道到底要刪除數(shù)據(jù)庫中的哪個用戶，而且還需要驗證這個用戶是否有資格提出這個請求。除此以外，這里就沒有什么其他的新東西可以介紹了。

這實際上只是REST Client可以做的冰山一角。我涵蓋了REST請求和一種形式的認(rèn)證，但它也可以支持GraphQL請求、多種其他類型的認(rèn)證、環(huán)境和自定義變量、查看和保存原始響應(yīng)等等。

我強(qiáng)烈建議您查閱文檔，以了解REST Client的所有功能，它非常強(qiáng)大。

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

感謝各位的閱讀！關(guān)于“如何利用VSCode REST插件進(jìn)行API調(diào)用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！