如何使用VS Code的REST客戶端插件進(jìn)行API調(diào)用

這篇文章主要介紹“如何使用VS Code的REST客戶端插件進(jìn)行API調(diào)用”，在日常操作中，相信很多人在如何使用VS Code的REST客戶端插件進(jìn)行API調(diào)用問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”如何使用VS Code的REST客戶端插件進(jìn)行API調(diào)用”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

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

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

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

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

但現(xiàn)在，如果你使用VS  Code(為什么不呢，用它寫代碼多好啊!)，生活就變得簡(jiǎn)單了。我們不再需要退出IDE來測(cè)試API，因?yàn)楝F(xiàn)在已經(jīng)有一個(gè)插件可以做到這一點(diǎn)：REST  Client[1]。使用REST Client是非常簡(jiǎn)單的，我將向您展示這個(gè)插件是多么簡(jiǎn)單，而且功能齊全。

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

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

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

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

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

安裝REST Client

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

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

設(shè)置REST Client腳本

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

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

測(cè)試一下：基本操作

這是很酷的部分：在我的經(jīng)驗(yàn)中，這個(gè)小小的REST  Client插件能夠做的事情和Postman等更復(fù)雜的API客戶端一樣多。下面，我將向你展示如何進(jìn)行每一種類型的基本CRUD操作，再加上如何像JWT令牌一樣進(jìn)行需要認(rèn)證的API調(diào)用，使用我在本地運(yùn)行的MERN用戶注冊(cè)應(yīng)用來指向調(diào)用。

POST示例

我將介紹的第一個(gè)示例是REST Client的  POST，因?yàn)橛脩粼谖业膽?yīng)用程序中必須先注冊(cè)才能進(jìn)行其他任何操作(畢竟，這只是一個(gè)登錄服務(wù))。因此，該代碼將在 test.http 文件中顯示。

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

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

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

您最后要注意的是 test.http 文件中請(qǐng)求后的 ### ，這是請(qǐng)求之間的分隔符，只要在每個(gè)請(qǐng)求之間插入 ###  就可以在文件中包含任意數(shù)量的請(qǐng)求。如果請(qǐng)求成功，您將看到與我上面發(fā)布的內(nèi)容類似的內(nèi)容。即使請(qǐng)求不成功，你仍然會(huì)得到所有這些關(guān)于剛才發(fā)生的信息，以及(希望)出了什么問題。爽啊

GET示例

現(xiàn)在已經(jīng)創(chuàng)建了一個(gè)用戶，比方說我們忘記了他們的密碼，他們發(fā)了一封郵件來找回密碼。電子郵件中包含令牌和鏈接，該鏈接會(huì)將他們帶到頁面以重置密碼。一旦他們點(diǎn)擊了鏈接并登陸頁面，一個(gè)  GET 請(qǐng)求就會(huì)被啟動(dòng)，以確保郵件中包含的用于重置密碼的令牌是有效的，這就是它可能的樣子。

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

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

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

Update示例

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

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

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

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

Authentication示例

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

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

在REST Client請(qǐng)求中添加授權(quán)真的很簡(jiǎn)單：簡(jiǎn)單地在路由和 content-type 被聲明的地方下面添加鍵  Authorization，然后(至少對(duì)我的情況而言)我添加JWT的鍵和值(因?yàn)樗鼈兂霈F(xiàn)在瀏覽器的本地存儲(chǔ)中)作為 Authorization  頭的值。這樣就變成了：

Authorization: jwt XXXXXXXXXXXXXXXXXX

然后只需發(fā)送請(qǐng)求，看看會(huì)發(fā)生什么。如果您的身份驗(yàn)證配置正確，您將收到來自服務(wù)器的某種類型的200響應(yīng)，對(duì)于我的請(qǐng)求，它將返回存儲(chǔ)在數(shù)據(jù)庫中的與該用戶相關(guān)的所有信息，以及一個(gè)成功找到該用戶的消息。這部分可能需要一些嘗試和錯(cuò)誤，但如果您能夠弄清楚一個(gè)成功的請(qǐng)求是如何在瀏覽器的Dev  Tools網(wǎng)絡(luò)調(diào)用中發(fā)出的，通過現(xiàn)有的Swagger端點(diǎn)，或者通過其他類似的文檔，這是非常值得的。

DELETE示例

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

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

這實(shí)際上只是REST  Client可以做的冰山一角。我涵蓋了REST請(qǐng)求和一種形式的認(rèn)證，但它也可以支持GraphQL請(qǐng)求、多種其他類型的認(rèn)證、環(huán)境和自定義變量、查看和保存原始響應(yīng)等等。我強(qiáng)烈建議您查閱文檔，以了解REST  Client的所有功能，它非常強(qiáng)大。

到此，關(guān)于“如何使用VS Code的REST客戶端插件進(jìn)行API調(diào)用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！