VSCode 小雞湯 第01期 - REST Client 簡單好用的介面測試輔助工具
今天給大家介紹一個後端開發輔助的好工具 —— REST Client，外掛如其名這就是一個 REST 的客戶端外掛，把我們的 VSCode 轉化為一個 REST 介面測試的利器
我們一般都會用 PostMan 來完成介面測試的工作，因為用起來十分簡單快捷，但是一直以來我也在尋找更好的方案，一個不用切換視窗多開一個 app 的方案 —— 終於在使用 VSCode 一段時版本間，我找到了 REST Client 外掛，初看 REST Client 外掛的時候，會覺得他十分的簡陋，但是在使用一段時間後會發現在 REST Client 外掛中已經有完成介面測試所需的所有東西
-
優勢
- 基於 HTTP 語言，HTTP 語言是一門非常簡單的語言，使用 HTTP 語言可以輕鬆的描述請求
- 純文字記錄，不同於 PostMan 儲存在雲端，或是 Paw 那樣儲存二進位制檔案，並且純文字可以使用 git 追蹤內容的變化
- 無需切換視窗，測試，除錯，程式碼編輯都在一個 VSCode 中完成
-
劣勢
- 操作和使用不像 PostMan 之類的圖形化工具那麼直觀
- 不支援請求前後對資料進行操作的指令碼，不過這個已經在作者的開發計劃中
很多時候我們只是需要寫完程式碼後手邊有一個小工具可以輕鬆愉快的看一眼介面是否正常，那麼 REST Client 就是我們的首選了
使用介紹
安裝和入門
外掛的安裝非常簡單，搜尋 restclient 即可安裝
安裝完成後，可以在命令選單中找到 REST Client 相關的功能
簡單請求
我們先從傳送最簡單的請求開始
首先需要新建一個 http 檔案，建立檔案時後綴為 http 即可，例如 test.http
之後輸入下面的內容：
GET http://localhost:8000/api/v1/public/echo?msg=1345asdf HTTP/1.1 複製程式碼
echo 是一個測試服務，他會返回你傳入的 msg 的內容，輸入完上面的
這時候請求上面會顯示一個 “Send Request” 按鈕，點選即可傳送請求，請求完成後，外掛會分割當前視窗將新的結果開啟在右側的視窗中，下圖中顯示了請求的所有相關資訊
HTTP 語言基礎
語言入門
HTTP 是一個非常簡單的語言，入門僅需幾分鐘
最基本的 HTTP 語言語法入門可以參看上面的內容，配合 VSCode 的自動提示功能，用起來簡直不要太快
也不用擔心是否記得 header 裡面那些選項，想不起來的時候 Ctrl + 空格 調出自動提示即可
要注意的地方
- 請求文字最後面需要有一個空行，或者一個
#開頭的行，建議空行，這樣多個請求看起來會非常好看 - 如果需要把
form型別的引數拆分為多行，那麼第二個引數開始必須以&開始（如圖） - GET 請求也可以將引數拆分多行，每行開頭必須以
?或者&開始
傳送檔案
一般來說，我們使用 multipart/form-data 請求方式來完成
如圖配置，REST Client 就會將檔案內容填充到相應的區域完成傳送
儲存請求結果
對於返回圖片的介面在 VSCode 中是可以直接預覽的，如果是 Excel 之類的二進位制檔案，那麼這裡可能會顯示亂碼（二進位制檔案）
選中相應結果頁，右上角提供了儲存結果的按鈕
檢視請求歷史
使用 Ctrl + Alt + H （macOS 使用 Cmd + option + H ）檢視請求歷史
使用變數
變數的好處，在開發過程中我們都知道，在 HTTP 語言中同樣可以使用變數來幫助我們組織請求程式碼
自定義變數
我們可以在 http 檔案中直接定義變數，使用 @ 符號開頭，以 {{variable name}} 的格式來使用
@host = http://localhost:8000
@token = adsfasdfasdfadsfasdfasdfas
### test
GET {{host}}/api/v1/public/echo HTTP/1.1
?msg=1345asdf
&bundle_id=demo
&test=1
&token={{token}}
### test request
POST {{host}}/api/v1/public/echo HTTP/1.1
Content-Type: application/x-www-form-urlencoded
User-Agent: iPhone
test=1
&bundle_id=demo
&msg=123123
&token={{token}}
複製程式碼
這樣在測試驗證不同環境介面正確性的場合，我們可以很方便的在不同伺服器之間切換，或是所有介面都使用同一個引數的時候非常方便例如上面的 token 應該是大部分介面都會使用到的
環境變數
除了使用自定義變數以外還可以對當前的專案或是建立編輯器全域性的環境變數
"rest-client.environmentVariables": {
"$shared": {
"version": "v1"
},
"local": {
"version": "v2",
"host": "http://localhost:8000",
"token": "tokentokentokentoken1"
},
"prod": {
"host": "http://api.xxxxxx.com",
"token": "tokentokentoken2"
}
}
複製程式碼
上面 $shared 中的變量表示在所有環境設定中都可以使用的
設定後可通過 Ctrl + Alt + E （ Cmd + option + E ）切換環境
系統變數
REST Client 提供了一些自帶的系統變數，方便我們直接使用（這裡由於我沒有使用過 Azure 所以跳過了 Azure 相關的變數，大家可以參考文件使用）
-
{{$guid}}: 生成一個 UUID -
{{$randomInt min max}}: 生成隨機整數 -
{{$timestamp [offset option]}}: 生成時間戳，可以使用類似{{$timestamp -3 d}}生成3天前的時間戳，或是使用{{$timestamp 2 h}}這樣的形式生成2小時後的時間戳 -
{{$datetime rfc1123|iso8601 [offset option]}}: 生成日期字串
VSCode 提供的輔助功能
VSCode 對我們使用 HTTP 語言提供了包括自動提示，Outline 程式碼導航功能，方便我們編寫介面測試程式碼
自動提示
Outline 以及程式碼導航
驗證和證書
Basic Auth
Basic Auth 可以使用已經 Base64 後的 username:password ，也可以直接填入 username 和 password ，也就是下面兩種形式都是可以的
使用 Base64 的結果
POST {{host}}/api/v1/public/echo HTTP/1.1
Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=
複製程式碼
使用 username 和 password
POST {{host}}/api/v1/public/echo HTTP/1.1
Authorization: Basic username password
複製程式碼
Digest Auth
Digest Auth 直接填入 username 和 password 即可
POST {{host}}/api/v1/public/echo HTTP/1.1
Authorization: Digest username password
複製程式碼
SSL 證書
ssl 證書在設定檔案中對特定域名指定證書路徑後，就可以自動生效了
"rest-client.certificates": {
"localhost:8081": {
"cert": "/Users/demo/Certificates/client.crt",
"key": "/Users/demo/Keys/client.key"
},
"example.com": {
"cert": "/Users/demo/Certificates/client.crt",
"key": "/Users/demo/Keys/client.key"
}
}
複製程式碼
每個 host 我們可以設定下面的內容：
- cert: x509 證書路徑
- key: 私鑰路徑
- pfx: PKCS #12 或者 PFX 證書路徑
- passphrase: 證書密碼（需要時設定）
程式碼生成
曾經使用 Postman 的時候，Postman 的程式碼生成功能為我提供了非常多的方便，REST Client 中提供了同樣的功能
選中一個請求後，點選右鍵選擇 Copy Request As cURL 可以把當前的請求複製成 curl 的命令，也可以使用 Ctrl + Alt + C （macOS 下 Cmd + Option + C ）撥出程式碼生成選單，選擇需要生成的語言
選擇語言後選擇具體程式碼呼叫的方式，比如 python 可以使用 http.client 庫或者 Requests 庫來發送請求
命名請求
之前我們傳送的所有請求都是匿名請求，匿名請求和命名請求的區別就是在一個 http 檔案內，可以引用命名請求的請求資訊和響應資訊，在請求之間有依賴關係時這個功能非常有用，例如每次登入成功後其他請求都需要更新登入返回的 token，命名請求可以用過 JSONPath 或者 XPath 獲取響應資料
在響應中也會顯示使用到當前命名請求的變數值的更新
一些有用的設定
設定響應顯示內容
在 REST Client 設定中的 “Preview Option” 可以設定請求響應顯示什麼內容，總共有四種， full ， body ， header ， exchang
我們分別來看下四種結果顯示什麼內容
- full：Header + Body
- body：只顯示 Body
- header：只顯示 Header
- exchange：顯示請求 + Header + Body
