VSCode 小雞湯 第01期 - REST Client 簡單好用的接口測試輔助工具

時間  2021-08-15 標籤 python git github 後端 api 服務器 微信 markdown app dom

介紹

今天給你們介紹一個後端開發輔助的好工具 —— REST Client，插件如其名這就是一個 REST 的客戶端插件，把咱們的 VSCode 轉化爲一個 REST 接口測試的利器python

REST Client

咱們通常都會用 PostMan 來完成接口測試的工做，由於用起來十分簡單快捷，可是一直以來我也在尋找更好的方案，一個不用切換窗口多開一個 app 的方案 —— 終於在使用 VSCode 一段時版本間，我找到了 REST Client 插件，初看 REST Client 插件的時候，會以爲他十分的簡陋，可是在使用一段時間後會發如今 REST Client 插件中已經有完成接口測試所需的全部東西git

  • 優點github

    • 基於 HTTP 語言，HTTP 語言是一門很是簡單的語言，使用 HTTP 語言能夠輕鬆的描述請求
    • 純文本記錄，不一樣於 PostMan 保存在雲端，或是 Paw 那樣保存二進制文件，而且純文本可使用 git 追蹤內容的變化
    • 無需切換窗口，測試，調試，代碼編輯都在一個 VSCode 中完成

  • 劣勢後端

    • 操做和使用不像 PostMan 之類的圖形化工具那麼直觀
    • 不支持請求先後對數據進行操做的腳本，不過這個已經在做者的開發計劃中

不少時候咱們只是須要寫完代碼後手邊有一個小工具能夠輕鬆愉快的看一眼接口是否正常，那麼 REST Client 就是咱們的首選了api

使用介紹

安裝和入門

插件的安裝很是簡單，搜索 restclient 便可安裝服務器

install

安裝完成後，能夠在命令菜單中找到 REST Client 相關的功能微信

菜單

簡單請求

咱們先從發送最簡單的請求開始markdown

首先須要新建一個 http 文件，建立文件時後綴爲 http 便可，例如 test.httpapp

以後輸入下面的內容：dom

GET http://localhost:8000/api/v1/public/echo?msg=1345asdf HTTP/1.1
複製代碼

echo 是一個測試服務，他會返回你傳入的 msg 的內容，輸入完上面的

這時候請求上面會顯示一個 「Send Request」 按鈕，點擊便可發送請求，請求完成後，插件會分割當前窗口將新的結果打開在右側的窗口中，下圖中顯示了請求的全部相關信息

Send Request

HTTP 語言基礎

語言入門

HTTP 是一個很是簡單的語言，入門僅需幾分鐘

HTTP 語言入門

最基本的 HTTP 語言語法入門能夠參看上面的內容，配合 VSCode 的自動提示功能，用起來簡直不要太快

也不用擔憂是否記得 header 裏面那些選項，想不起來的時候 Ctrl + 空格 調出自動提示便可

要注意的地方

  1. 請求文本最後面須要有一個空行，或者一個 # 開頭的行，建議空行，這樣多個請求看起來會很是好看
  2. 若是須要把 form 類型的參數拆分爲多行，那麼第二個參數開始必須以 & 開始（如圖）
  3. GET 請求也能夠將參數拆分多行，每行開頭必須以 ? 或者 & 開始

發送文件

通常來講，咱們使用 multipart/form-data 請求方式來完成

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 以及代碼導航

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 庫來發送請求

Python 請求方式

命名請求

以前咱們發送的全部請求都是匿名請求，匿名請求和命名請求的區別就是在一個 http 文件內，能夠引用命名請求的請求信息和響應信息，在請求之間有依賴關係時這個功能很是有用，例如每次登陸成功後其餘請求都須要更新登陸返回的 token，命名請求能夠用過 JSONPath 或者 XPath 獲取響應數據

命名請求

在響應中也會顯示使用到當前命名請求的變量值的更新

請求響應

一些有用的設置

設置響應顯示內容

在 REST Client 設置中的 「Preview Option」 能夠設置請求響應顯示什麼內容，總共有四種，full，body，header，exchang

設置選項

咱們分別來看下四種結果顯示什麼內容

  • full：Header + Body

full

  • body：只顯示 Body

body

  • header：只顯示 Header

header

  • exchange：顯示請求 + Header + Body

exchange

其餘經常使用的設置選項

  • rest-client.timeoutinmilliseconds: 設置請求超時，單位毫秒
  • rest-client.showResponseInDifferentTab: 每一個響應請求建立一個新的 tab，爲 false 時，每次請求會覆蓋上一次的請求結果，設置爲 true 時每次請求都會打開一個新的 tab，方便對比屢次請求結果
  • rest-client.previewColumn: 請求結果顯示，current 表示顯示在當前的編輯器分組 beside 表示顯示在側面編輯器分組（這個側面根據編輯器的 workbench.editor.openSideBySideDirection 選項會顯示在右面或是下面
  • 代理：使用http.proxy 和 http.proxyStrictSSL

最後

其實 Postman 和 Paw 都提供更爲強力的輔助工具，這裏使用 REST Client 單純以爲 Postman 和 Paw 大部分功能我其實都用不到，由於僅僅驗證接口是否正常，業務是否能跑通，因此一直在尋找一個簡單的工具，REST Client 恰好知足了我全部的需求

這裏附上 REST Client 項目地址，裏面也有對應的文檔 github.com/Huachao/vsc…

最後歡迎你們訂閱個人微信公衆號 Little Code

Little Code

  • 公衆號主要發一些開發相關的技術文章
  • 談談本身對技術的理解，經驗
  • 也許會談談人生的感悟
  • 本人不是很高產，可是力求保證質量和原創
联系我们 沪ICP备13005482号-10