前言
接口調試是每一個軟體開發從業者必不可少的一項技能，一個項目的完成必然經過大量的接口測試，實際開發過程中，接口調試的時間不比實際開發所用的時間少。
作為前端開發人員，我們通常使用 Postman(或 PostWoman 等 ) 工具來進行REST API調用。
一、Postman 限制
Postman 用來調試接口很友善，但它有很多限制。
1. 需要開啟額外的軟體，并且占用大量的 RAM
我們已經使用 VSCode 開發項目，為什麼我們還需要額外打開 Postman 去調試接口喃？并且 Postman 運作占用了大量的 RAM，這對 RAM 緊缺的裝置來說，尤為重要。
2. 進階功能要付費
進行調用測試 API 是可以的，但是如果你要編輯、版本控制或僅與你的團隊共享，則不是很友善。
當然，你可以使用 Postman 付費版本，但這意味着你需要付費，并且你所在的所有團隊都需要使用 Postman ，這工程量就很大了！
二、你知道 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 檔案
步驟三：寫入測試接口
- 符合 RFC 2616 标準的 POST 請求
POST http://dummy.restapiexample.com/api/v1/create HTTP/1.1
content-type: application/json
{
"name":"Hendry",
"salary":"61888",
"age":"26"
}
- 符合 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)，它可以由任何字元組成，甚至允許空格(前導和尾随空格将被剝離)；
- 如果你想保留一些像換行符這樣的特殊字元，你可以使用反斜杠 ；
自定義請求變量
當單個請求結果的值需要被其它請求使用時，可以使用請求變量，格式為：@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}}。
五、總結
Postman 有口皆碑，确實是一個不錯的工具，但 REST Client 也值得進行嘗試，畢竟連後端也已經推出了 IDEA REST Client， 在和同僚進行協作開發時，在項目中增加一個 .http 接口請求檔案，友善自己的同時友善其他人。
掘金@前端瓶子君