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

前言

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

做爲前端開發人員，咱們一般使用 Postman（或 PostWoman 等）工具來進行REST API調用。前端

1、Postman 限制

Postman 用來調試接口很方便，但它有不少限制。git

1. 須要開啓額外的軟件，而且佔用大量的 RAM

咱們已經使用 VSCode 開發項目，爲何咱們還須要額外打開 Postman 去調試接口喃？而且 Postman 運行佔用了大量的 RAM，這對 RAM 緊缺的設備來講，尤其重要。github

2. 高級功能要付費

進行調用測試 API 是能夠的，可是若是你要編輯、版本控制或僅與你的團隊共享，則不是很方便。json

固然，你可使用 Postman 付費版本，但這意味着你須要付費，而且你所在的全部團隊都須要使用 Postman ，這工程量就很大了！後端

2、你知道 REST Client 嗎？

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

因爲它是基於文本格式，因此咱們能夠輕鬆的在存儲庫之間進行版本控制。👍markdown

3、Postman 與 REST Client

1. 優勢

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

2. 缺點

你必須使用 VS Code，若是使用其它的工具開發是不能夠的；
Postman 擁有強大的用戶操做界面，而 REST Client 沒有操做界面，僅僅是在一個 HTTP 文件中編寫請求，沒有 Postman 方便；

4、REST Client

1. 常規

步驟一：安裝 REST Client 插件app

步驟二：建立一個 .http 或 .rest 文件dom

步驟三：寫入測試接口

符合 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），它能夠由任何字符組成，甚至容許空格（前導和尾隨空格將被剝離）；
若是你想保留一些像換行符這樣的特殊字符，你可使用反斜槓 \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！！！👏👏👏

5、總結

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

若是以爲不錯，就點個贊吧！👍👍👍

想看往期更過系列文章，點擊前往 github 博客主頁

6、走在最後

❤️玩得開心，不斷學習，並始終保持編碼。👨💻
若有任何問題或更獨特的看法，歡迎評論或直接聯繫瓶子君（公衆號回覆 123 便可）！👀👇
👇歡迎關注：前端瓶子君，每日更新！👇