Postman 可視化響應(yīng)

2023-04-03 11:12 更新

Postman Visualizer提供了一種可編程的方式來直觀地表示您的請求響應(yīng)。添加到請求測試的可視化代碼將呈現(xiàn)在響應(yīng)主體的可視化選項(xiàng)卡中，以及 Pretty、Raw 和 Preview 選項(xiàng)。

可視化渲染

可視化工具讓您以有助于理解的方式呈現(xiàn)您的響應(yīng)數(shù)據(jù)。您可以使用可視化工具來建模和突出顯示與您的項(xiàng)目相關(guān)的信息，而不必通讀原始響應(yīng)數(shù)據(jù)。當(dāng)您共享 Postman Collection時(shí)，您團(tuán)隊(duì)中的其他人也可以在每個(gè)請求的上下文中了解您的可視化效果。

可視化響應(yīng)數(shù)據(jù)


要可視化您的響應(yīng)數(shù)據(jù)，請將代碼添加到請求的預(yù)請求或測試 腳本。該pm.visualizer.set()方法會(huì)將您的可視化工具代碼應(yīng)用于數(shù)據(jù)，并在請求運(yùn)行時(shí)將其呈現(xiàn)在“可視化”選項(xiàng)卡中。

添加可視化代碼

該pm.visualizer.set()方法接受Handlebars模板字符串作為其第一個(gè)參數(shù)。第二個(gè)參數(shù)是你要用模板顯示的數(shù)據(jù)。繼續(xù)閱讀以了解如何構(gòu)建 Handlebars 模板并將數(shù)據(jù)傳遞給它。

呈現(xiàn) HTML

有關(guān)基本可視化工具的示例，請?jiān)?Postman 中打開以下請求：

在 Postman 中運(yùn)行

示例端點(diǎn)使用以下 JSON 響應(yīng)主體結(jié)構(gòu)的名稱和電子郵件地址列表進(jìn)行響應(yīng)：

[
    {
        "name": "Alice",
        "email": "alice@example.com"
    },
    {
        "name": "Jack",
        "email": "jack@example.com"
    },
    // ... and so on
]

可視化工具代碼創(chuàng)建一個(gè) Handlebars 模板，以通過遍歷數(shù)組來呈現(xiàn)顯示姓名和電子郵件地址的表格。車把可以用{{#each}}標(biāo)簽做到這一點(diǎn)。此腳本在請求測試中運(yùn)行：

var template = `
    <table bgcolor="#FFFFFF">
        <tr>
            <th>Name</th>
            <th>Email</th>
        </tr>

        {{#each response}}
            <tr>
                <td>{{name}}</td>
                <td>{{email}}</td>
            </tr>
        {{/each}}
    </table>
`;

模板中雙花括號(hào)內(nèi)的變量名將被傳遞給方法的數(shù)據(jù)替換pm.visualizer.set()。要應(yīng)用模板，以下代碼完成測試腳本：

// Set visualizer
pm.visualizer.set(template, {
    // Pass the response body parsed as JSON as `data`
    response: pm.response.json()
});

該template變量是之前創(chuàng)建的模板字符串。傳遞的第二個(gè)參數(shù)是定義為屬性的對象response——這是模板在循環(huán)中期望的變量{{#each response}}。分配給該屬性的值response是解析為對象的請求的響應(yīng) JSON 數(shù)據(jù)。

查看可視化

在 Postman 中發(fā)送請求并選擇“可視化”選項(xiàng)卡。Postman 將表格呈現(xiàn)為 HTML，就像在 Web 瀏覽器中一樣。

可視化臺(tái)渲染

向可視化添加樣式和交互

您可以使用 HTML 模板代碼中的標(biāo)簽加載外部樣式表<link>，使用與將樣式表添加到網(wǎng)頁相同的技術(shù)。您還可以將樣式表添加為<style>標(biāo)簽。<script>同樣，您可以在模板 HTML 代碼內(nèi)的標(biāo)記中使用 JavaScript 代碼添加交互。

Visualizer 不支持下載資源的交互。

使用你自己的庫

您可以使用Postman Sandbox中的任何庫以編程方式生成布局模板。要導(dǎo)入另一個(gè)外部 JavaScript 庫，請將 URL 添加到<script>模板代碼中的標(biāo)記，使用與將 JavaScript 加載到 HTML 文件中相同的方法。這使您可以使用您選擇的可視化工具（例如 D3.js）呈現(xiàn)您的請求數(shù)據(jù)。

訪問模板內(nèi)的數(shù)據(jù)

模板中的任何元素都可以通過調(diào)用該方法<script>訪問第二個(gè)參數(shù)中傳遞的數(shù)據(jù)。這僅適用于模板中的 JavaScript 代碼，例如，如果您的模板包含用于呈現(xiàn)圖表的代碼。pm.visualizer.set()pm.getData(callback)

該pm.getData(callback)方法將回調(diào)函數(shù)作為其參數(shù)。此回調(diào)接受兩個(gè)參數(shù)：error和data。第二個(gè)參數(shù)是data傳遞給pm.visualizer.set().

試試看

有關(guān)可視化工具代碼的更多示例，請通過分叉集合將以下任何集合添加到您的工作區(qū)。您還可以導(dǎo)出然后導(dǎo)入集合。分叉或?qū)爰虾?，從邊欄中的集合打開請求，然后選擇發(fā)送。Postman 將在Visualize選項(xiàng)卡中顯示呈現(xiàn)的數(shù)據(jù)。

可視化API

您可以從Postman API訪問可視化工具。該pm.visualizer.set()方法采用三個(gè)參數(shù)：

  • layout（必需）：第一個(gè)參數(shù)是Handlebars HTML 模板字符串。
  • data（可選）：第二個(gè)參數(shù)是可以綁定到模板的數(shù)據(jù)?？梢栽谀０逯性L問該對象的屬性。
  • options（可選）：第三個(gè)參數(shù)是options的對象Handlebars.compile()。您可以使用它來控制 Handlebars 如何編譯模板。

Postman 使用您傳遞的信息pm.visualizer.set()在沙箱中為可視化工具呈現(xiàn) HTML 頁面。為呈現(xiàn)的 HTML 頁面選擇“可視化”選項(xiàng)卡。該layout字符串被插入到<body>呈現(xiàn)的頁面中，包括模板具有的任何 JavaScript、CSS 和 HTML。

調(diào)試可視化工具

您可以通過右鍵單擊Visualize區(qū)域并選擇Inspect visualization來調(diào)試 Postman 中的可視化。這將打開附加到沙箱的可視化工具開發(fā)人員工具。您可以像調(diào)試網(wǎng)頁一樣使用它。

在 Postman 中調(diào)試可視化工具

下一步

現(xiàn)在您已經(jīng)了解了如何在 Postman 中可視化響應(yīng)，您可以開始創(chuàng)建自己的可視化。

  • 首先，您可以嘗試更多可視化工具示例工作區(qū)。運(yùn)行示例請求，然后調(diào)整代碼以獲得您自己的數(shù)據(jù)所需的結(jié)果。
  • 有關(guān) Postman 如何提供對腳本內(nèi)響應(yīng)數(shù)據(jù)的訪問的更多信息，請?jiān)L問測試示例。


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)