是時候拋棄Postman了,試試 VS Code 自帶神器插件


前言

接口調試是每一個軟件開發從業者必不可少的一項技能,一個項目的完成必然經過大量的接口測試,實際開發過程中,接口調試的時間不比實際開發所用的時間少。

作為前端開發人員,我們通常使用 Postman(或 PostWoman 等 ) 工具來進行REST API調用。

 

一、Postman 限制

Postman 用來調試接口很方便,但它有很多限制。

1. 需要開啟額外的軟件,並且占用大量的 RAM

我們已經使用 VSCode 開發項目,為什么我們還需要額外打開 Postman 去調試接口喃?並且 Postman 運行占用了大量的 RAM,這對 RAM 緊缺的設備來說,尤為重要。

2. 高級功能要付費

進行調用測試 API 是可以的,但是如果你要編輯、版本控制或僅與你的團隊共享,則不是很方便。

當然,你可以使用 Postman 付費版本,但這意味着你需要付費,並且你所在的所有團隊都需要使用 Postman ,這工程量就很大了!

廣州vi設計http://www.maiqicn.com 我的007辦公資源網站https://www.wode007.com

二、你知道 REST Client 嗎?

REST Client 是一個 VS Code 擴展插件,它允許你發送 HTTP 請求並直接在 VS Code 上查看響應結果。

由於它是基於文本格式,所以我們可以輕松的在存儲庫之間進行版本控制。

 

三、Postman 與 REST Client

1. 優點

  • 能夠進行版本化並可以在團隊間共享你的 API 調用;
  • 僅僅是一個 HTTP 文件,團隊成員間可以通過 git 協作維護這個文件;
  • 無需切換窗口,可以在一個 HTTP 文件中去維護多個接口;
  • 相比於Postman,REST Client支持了 cURL 和 RFC 2616 兩種標准來調用REST API;

2. 缺點

  • 你必須使用 VS Code,如果使用其它的工具開發是不可以的;
  • Postman 擁有強大的用戶操作界面,而 REST Client 沒有操作界面,僅僅是在一個 HTTP 文件中編寫請求,沒有 Postman 方便;

 

四、REST Client

1. 常規

步驟一:安裝 REST Client 插件

步驟二: 創建一個 .http 或 .rest 文件

步驟三:寫入測試接口

  1. 符合 RFC 2616 標准的 POST 請求
POST http://dummy.restapiexample.com/api/v1/create HTTP/1.1 content-type: application/json { "name":"Hendry", "salary":"61888", "age":"26" }
  1. 符合 cURL 標准的 POST 請求
curl -X POST "http://dummy.restapiexample.com/api/v1/create" -d "Hello World"

如果省略 request 方法,請求將被視為 GET 。

注意:接口間通過 ### 分隔,同一個 .http 文件里可以涵蓋多個 HTTP 請求。不像 Postman,不同的 HTTP 請求需要放在不同的 tab 里。

步驟四:發送請求,測試接口

點擊 Send Request ,或者右鍵選擇 Send Request ,或者直接用快捷鍵 Ctrl+Alt+R(或Cmd+Alt+R) ,你的 REST API 就執行了,然后 API Response 就會顯示在右邊區域。

2. 更遠一步

一個 http 文件可能定義許多請求和文件級自定義變量,很難找到你想要的請求/變量。我們可以使用快捷鍵 Ctrl+Shift+O(或Cmd+Shift+O)來切換請求/變量。

自定義環境變量

不同的環境(開發、測試、生產),API 接口參數可能有所不同,我們不可能每次切換環境的時候,都手動修改代碼,所以我們可以自定義項目的環境變量,每次切換即可。

點擊 Code => Preferences => Settings 打開設置,切換到 Workspace Settings ,配置 settings.json 文件:

{
  "rest-client.environmentvariables": { "$shared": { "version": "v1", "prodToken": "foo", "nonProdToken": "bar" }, "local": { "version": "v2", "host": "localhost", "dummyhost": "local", "token": "{{$shared nonProdToken}}", "secretKey": "devSecret" }, "production": { "host": "api.apiopen.top", "dummyhost": "dummy.restapiexample.com", "token": "{{$shared prodToken}}", "secretKey" : "prodSecret" } } }

可以切換不同的環境(Ctrl+Alt+E 或 Cmd+Alt+E),調用相應的配置項(host 、 token 等)。

### 測試接口 RFC 2616 // host 為環境變量 GET https://{{host}}/musicRankings HTTP/1.1

當然,rest-client 還有更多的配置項,例如:

  • rest-client.defaultHeaders :默認的 header 請求體,默認為 { "User-Agent": "vscode-restclient", "Accept-Encoding": "gzip" } ;
  • rest-client.timeoutinmilliseconds :超時時長,默認為 0 ms;
  • rest-client.previewOption :控制哪些部分應該通過rest-client預覽,可選 full 、 headers 、 body 、 exchange ,默認為 full ;
  • rest-client.followredirect :是否支持 HTTP 3xx 的重定向,默認支持;

等等…...

自定義文件變量

我們可以在 HTTP 文件任意位置定義文件變量,它們都可以在整個文件的任何請求中引用。例如:

// 文件變量 @port = 8080 @contentType = application/json ### 測試接口 RFC 2616 // 文件變量 @name = musicRankings GET https://{{host}}/{{name}} HTTP/1.1
  • 對於文件變量,定義遵循 @variableName = variableValue 占用完整行的語法;
  • 變量名稱(variableName)不得包含任何空格。至於變量值(variableValue),它可以由任何字符組成,甚至允許空格(前導和尾隨空格將被剝離);
  • 如果你想保留一些像換行符這樣的特殊字符,你可以使用反斜杠 \n ;

自定義請求變量

當單個請求結果的值需要被其它請求使用時,可以使用請求變量,格式為:@name newname ,請求變量引用語法為 {{requestName.(response|request).(body|headers).(JSONPath|XPath|Header Name)}}。

@contentType = application/json

### # @name createComment POST https://{{host}}/comments HTTP/1.1 Content-Type: {{contentType}} ### # @name getCreatedComment GET https://{{host}}/comments/{{createComment.response.body.$.id}} HTTP/1.1 Authorization: {{login.response.headers.X-AuthToken}}

系統變量

系統自帶的一些變量,使用系統變量需要有 $符號

  • {{$guid}} 唯一識別號
  • {{$randomInt min max}} 返回一個min 和 max 之間的隨機數
  • {{$timestamp [offset option]}}:添加UTC時間戳。
  • {{$timestamp number option}},例如3小時前{{$timestamp -3 h}};代表后天{{$timestamp 2 d}}。

更多系統變量用法請參考 官方文檔

更多功能等待你的挖掘,詳見vscode-restclient!!!

 

五、總結

Postman 有口皆碑,確實是一個不錯的工具,但 REST Client 也值得進行嘗試,畢竟連后端也已經推出了 IDEA REST Client, 在和同事進行協作開發時,在項目中增加一個 .http 接口請求文件,方便自己的同時方便其他人。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM