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

10年積累的網(wǎng)站設(shè)計(jì)、網(wǎng)站制作經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先做網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有南潯免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

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

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

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

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

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

使用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ì)無(wú)比感激。

所以當(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工具。因此，讓我們開(kāi)始使用它。

安裝REST Client

要找到它，打開(kāi)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)行來(lái)自該文件的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)用來(lái)指向調(diào)用。

POST示例

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

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

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

REST Client為了正常工作所需要的第一件事是發(fā)出請(qǐng)求的類型及其嘗試訪問(wèn)的路由的完整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ā)生的信息，以及（希望）出了什么問(wèn)題。爽啊

GET示例

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

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

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

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

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

Update示例

接下來(lái)是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ù)我所知，沒(méi)有保護(hù)路由的應(yīng)用程序很少，需要某種認(rèn)證。

Authentication示例

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

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

在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)證配置正確，您將收到來(lái)自服務(wù)器的某種類型的200響應(yīng)，對(duì)于我的請(qǐng)求，它將返回存儲(chǔ)在數(shù)據(jù)庫(kù)中的與該用戶相關(guān)的所有信息，以及一個(gè)成功找到該用戶的消息。

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

DELETE示例

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

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

這實(shí)際上只是REST Client可以做的冰山一角。我涵蓋了REST請(qǐng)求和一種形式的認(rèn)證，但它也可以支持GraphQL請(qǐng)求、多種其他類型的認(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)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

網(wǎng)頁(yè)名稱：如何利用VSCodeREST插件進(jìn)行API調(diào)用-創(chuàng)新互聯(lián)
文章出自：http://chinadenli.net/article2/ecsoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開(kāi)發(fā)、微信公眾號(hào)、網(wǎng)頁(yè)設(shè)計(jì)公司、網(wǎng)站策劃、企業(yè)網(wǎng)站制作、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)