為什么要離開IDE去測(cè)試新的API?現(xiàn)在你不必這樣做了。

我們?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ù)庫(kù)中，我們的應(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ì)將他們帶到頁(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)求分開。

如果令牌確實(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ù)庫(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)證配置正確，您將收到來自服務(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ā)出的，通過現(xiàn)有的Swagger端點(diǎn)，或者通過其他類似的文檔，這是非常值得的。

DELETE示例

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

這個(gè) DELETE 需要的查詢參數(shù)是 username，這樣它就知道到底要?jiǎng)h除數(shù)據(jù)庫(kù)中的哪個(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)大。

REST Client文檔：https://marketplace.visualstudio.com/items?itemName=humao.rest-client

結(jié)束

數(shù)據(jù)驅(qū)動(dòng)著互聯(lián)網(wǎng)，而隨著職業(yè)生涯的進(jìn)一步發(fā)展，Web開發(fā)人員最終會(huì)變得非常善于訪問和轉(zhuǎn)換數(shù)據(jù)以滿足自己的需求。

以前，當(dāng)獲取托管在其他地方的數(shù)據(jù)時(shí)，Web開發(fā)人員經(jīng)常會(huì)求助于Postman或Insomnia這樣的工具，以擁有比命令行稍微好一點(diǎn)的界面，但現(xiàn)在有一個(gè)VS Code插件，它讓代碼編輯器之外的需求成為了過去，它叫REST Client，非常棒。CRUD操作?

沒問題!支持GraphQL?沒問題!認(rèn)證選項(xiàng)?沒問題!REST Client提供了所有這些選項(xiàng)以及更多，而且設(shè)置和使用起來非常簡(jiǎn)單。我肯定會(huì)在以后的項(xiàng)目中更多地使用它。

請(qǐng)過幾周再回來看看——我將寫更多有關(guān)JavaScript，React，ES6或其他與Web開發(fā)相關(guān)的內(nèi)容。謝謝你的閱讀。我希望你能考慮用REST Client來處理你未來可能需要做的任何API查詢，我想你會(huì)對(duì)它能提供的愉快體驗(yàn)感到驚喜，不需要任何API GUI。 🙂

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

作者：Paige Niedringhaus

本文轉(zhuǎn)載自微信公眾號(hào)「前端全棧開發(fā)者」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系前端全棧開發(fā)者公眾號(hào)。