メインコンテンツまでスキップ

Responseの可視化

Apidogは、RequestのResponseを視覚的に表現可能な方法を提供します。可視化機能を利用するには、Response 部分のVisualizeタブに切り替えてください。

pm.visualizer.set()​

「前処置/後処理」の「カスタムScript」で、pm.visualizer.set()を使用すると、可視化コードがRequest 送信中のResponseのBodyの「Visualize」タブで表示されます。

使い方​

pm.visualizer.set() メソッド​

このメソッドは3つのパラメータが適用されます。

  1. template は必須のパラメータです。一番目のパラメータは Handlebarsが受信したHTMLテンプレートの文字列（string）になり、この文字列は最終<body>の下でレンダリングされます。templateで <link>を書くことで外部 CSSスタイルシートをロードするか、<script>を使用してサードパーティのライブラリをロードすることができます。

  2. dataは非必須のパラメータで、 Handlebars のテンプレート文字列変数を置き換えるために使用されるオブジェクトを受け取ります。

    const template = `<div>{{name}}</div>`;
    pm.visualizer.set(template, {
        name: 'Apidog'
    })
    // The rendered result is <div>Apidog</div>

  3. options は非必須のパラメータで、 optionsメソッドによって受信されたoptionsパラメータと同様、 Handlebarsが最初のパラメータで渡されたテンプレート文字列をコンパイルする方法を設定するために使用されます。

pm.getData(cb: (err, data) => void)​

このメソッドで受信したパラメータは関数です。これにより、pm.visualizer.set()で渡されたテンプレート文字列で渡した2 番目のパラメータのデータを取得できます。

  1. error エラーメッセージ

  2. data はpm.visualizer.set()の2 番目のパラメータを通して渡されたデータ 

const template = `
    <div>{{name}}</div>
    <script>
        pm.getData(function(err, data){
            // Do the corresponding operation according to the incoming data in the callback function
            console.log(data.name)
            // Apidog
        })
    </script>
`
pm.visualizer.set(template, {
    name: 'Apidog'
})

⚠️ ご注意：テンプレート文字列で window オブジェクト内の Worker と indexedDB を呼び出すことができません。

例​

Base64の画像 - 後処理Script​

// Return data from the API and encapsulate it into the structure you need.
var resp = {
    response: pm.response.json()
}
// Html template character
var template = `<html><img src="{{response.data}}" /></html>`;

// Set up visualizer data. Pass templates and parse objects.
pm.visualizer.set(template, resp);