碼上快樂

相關內容    簡體    繁體

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

本文轉載自   查看原文   2019-02-02 12:30   1003    VSCode

介紹

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

REST Client

我們一般都會用 PostMan 來完成接口測試的工作，因為用起來十分簡單快捷，但是一直以來我也在尋找更好的方案，一個不用切換窗口多開一個 app 的方案 —— 終於在使用 VSCode 一段時版本間，我找到了 REST Client 插件，初看 REST Client 插件的時候，會覺得他十分的簡陋，但是在使用一段時間后會發現在 REST Client 插件中已經有完成接口測試所需的所有東西

  • 優勢

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

  • 劣勢

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

很多時候我們只是需要寫完代碼后手邊有一個小工具可以輕松愉快的看一眼接口是否正常，那么 REST Client 就是我們的首選了

使用介紹

安裝和入門

插件的安裝非常簡單，搜索 restclient 即可安裝

install

安裝完成后，可以在命令菜單中找到 REST Client 相關的功能

菜單

簡單請求

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

首先需要新建一個 http 文件，創建文件時后綴為 http 即可，例如 test.http

之后輸入下面的內容：

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 項目地址，里面也有對應的文檔 https://github.com/Huachao/vscode-restclient

最后歡迎大家訂閱我的微信公眾號 Little Code

Little Code

  • 公眾號主要發一些開發相關的技術文章
  • 談談自己對技術的理解，經驗
  • 也許會談談人生的感悟
  • 本人不是很高產，但是力求保證質量和原創


免責聲明！

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



猜您在找 最好用的css輔助工具——SASS&LESS http接口測試工具 REST Client nodejs開發輔助工具nodemon Unity輔助工具AssetStudio的擴展 Office開發需要的輔助工具 使用meld作為git的輔助工具 Tor洋蔥網絡(3)（Tor輔助工具Privoxy/SocksCap） 滲透利器 | 提權輔助工具箱 后滲透提權輔助工具BeRoot詳解 linux提權輔助工具（五）：linpeas.sh
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM