インターフェイスから返される応答データ構造が非常に複雑で、ネストされたオブジェクトや配列でいっぱいで、画像の URL も含まれる場合があるため、特定の情報を見つけたい場合は、JSON 応答を常に上下にスクロールする必要があります。必須 フィールドを見つけようとしています 。これは煩わしいだけでなく、貴重な時間を無駄にします。
Apifox は、複雑な JSON 応答データを直感的なグラフィカル インターフェイスに変換するためのプログラム可能な方法を提供します。これにより、データ検索の効率が大幅に向上し、応答の読みやすさが向上し、エラーの可能性が減ります。
たとえば、テーブルを介して階層的に複雑なデータ構造を表現できます。
SVG 形式の画像をプレゼンテーション用に Base64 エンコード形式に変換します。
サードパーティのライブラリ (Echarts、D3.js など) を導入してグラフを直接表示することもできます。
実装のアイデア
ビジュアル レスポンスを実装する方法は非常に簡単です。インターフェイスの「ポスト オペレーション」にカスタム スクリプトを追加し、 pm.visualizer.set()関数を通じて パラメータを渡します。この関数の構文は次のとおりです。
pm.visualizer.set(template,data)- テンプレート: 必須。HTML テンプレート文字列。この文字列は最終的に以下にレンダリングされます。外部 CSS スタイル シートを読み込むようにテンプレートに書き込むか、渡すことができます。
- データ: オプション。オブジェクトを受け取り、データをテンプレートに渡します。
例えば：
const template = `<div>{
{name}}</div>`; pm.visualizer.set(template, { name: 'Apifox'}) // 渲染出来的结果为： <div>Apifox</div>一般的な例をいくつか以下に示します。
通常の写真を視覚化する
JPEG、PNG、WebP などの形式で画像を視覚化できます。たとえば、インターフェイスは次のデータ構造を返します。
{ "code": 0, "message": "ok", "data": { "imgHead": "https://cdn.apifox.cn/logo/apifox-logo-64.png" }}画像を視覚化するには、このインターフェイスの事後操作にカスタム スクリプトを追加する必要があります。
最初のステップは、 インターフェイス データ (ピクチャ パス) を取得することです。
// 1、获取图片路径 let imgURL = pm.response.json().data.imgHead;2 番目のステップは、HTML テンプレートを追加することです。template テンプレートは、インターフェイス データをレンダリングするために使用されます。{ {}} は、テンプレート内の変数をラップするために使用されます。
// 2、添加 HTML 模板 let template = ` <img src="{
{imgURL}}"/>`;3 番目のステップでは、 pm.visualizer.set() 関数を適用し、テンプレートとデータをそれに渡します。
// 3、设置 visualizer 数据。传模板、解析对象 pm.visualizer.set(template, { imgURL });結果は次のとおりです。
SVG画像を視覚化する
SVG 画像は視覚的にレンダリングできます (一部の検証コード画像など)。たとえば、インターフェイスは次のデータ構造を返します。
{ "code": 0, "message": "ok", "data": { "img": "<svg xmlns="http://www.w3.org/2000/svg">\n ...................... </svg>" }}SVG 画像の視覚化を実現するには、このインターフェイスの後処理にカスタム スクリプトを追加する必要があります。
最初のステップは、インターフェイス データ (ピクチャ パス) を取得し、 btoa() メソッドを通じてそれを Base64 エンコーディングに変換することです。
// 获取 SVG 图片数据let svgContent = pm.response.json().data.img; // 将 SVG 内容转换为 Base64 编码let imgBase64 = `data:image/svg+xml;charset=utf-8;base64,${btoa(svgContent)}`;2 番目のステップは、HTML テンプレートを追加することです。 { {}} を使用して変数をテンプレートで ラップします。
// HTML 模板let template = ` <img src="{
{imgBase64}}" />`;3 番目のステップは、 pm.visualizer.set() 関数を使用して、テンプレートとデータを渡すことです。
// 3、应用函数pm.visualizer.set(template, { tableData });結果は次のとおりです。
もちろん、 インターフェイス テスト を実施する通常の状況では、画像検証コードを入力する必要があるシナリオに遭遇した場合、通常はテスト アカウントにホワイトリストを追加し、画像検証コードの検証をスキップします。
ビジュアルテーブル
データをテーブル形式でより直観的に表現できる複雑な JSON データ構造。たとえば、インターフェイスは次のデータ構造を返します。
{ "code": 0, "message": "ok", "data": [ { "id": 1, "name": "Apifox", "logo": "https://cdn.apifox.cn/logo/apifox-logo-64.png", "description": "API 文档、API 调试、API Mock、API 自动化测试、API 一体化协作平台" }, { "id": 2, "name": "ChatGPT", "logo": "https://cdn.apifox.cn/app/project-icon/custom/20230831/d925d46b-dca7-4bfe-9fee-524c93ba9549.png", "description": "基于人工智能技术的对话式语言模型" }, { "id": 3, "name": "GitHub", "logo": "https://cdn.apifox.cn/app/project-icon/custom/20220701/d5a806db-8567-4e50-a4f8-341581c542ae.png", "description": "一个基于云端的代码托管平台" }, ............ ]}JSON 視覚化を実装するには、このインターフェイスのポストオペレーションにカスタム スクリプトを追加する必要があります。
最初のステップは、インターフェイス データを取得することです。
// 1、获取接口数据let tableData = pm.response.json().data;2 番目のステップは、HTML テンプレートを追加することです。配列データをループする場合は、{ {#each 変数名}} で開始し、 { {/each}} で終了します。変数は { {}} で囲まれています。
// 2、添加 HTML 模板var template =`<style> table { border-collapse: collapse; width: 90%; } table, th, td { border: 1px solid #ddd; } th, td { padding: 10px; text-align: center; } th { background-color: #f2f2f2; } img { max-width: 32px; max-height: 32px; }</style> <table> <thead> <tr> <th>ID</th> <th>Name</th> <th>logo</th> <th>description</th> </tr> </thead> <tbody> {
{#each tableData}} <tr> <td>{
{id}}</td> <td>{
{name}}</td> <td><img src="{
{logo}}"/></td> <td>{
{description}}</td> </tr> {
{/each}} </tbody></table>`3 番目のステップは、 pm.visualizer.set() 関数を適用することです。
// 3、应用函数pm.visualizer.set(template, { tableData });結果は次のとおりです。
ビジュアルチャート
ポストオペレーションのカスタムスクリプトでは、チャートレンダリング用のサードパーティライブラリ（Echarts、D3.jsなど）を導入することもできます。操作手順は上記と同じです。
たとえば、この Echarts ビジュアル チャート スクリプトは次のとおりです。
var template = ` <div id="container" style="height: 500px;width: 90%"></div> <script src="https://fastly.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script> <script> var dom = document.getElementById('container'); var myChart = echarts.init(dom, null, { renderer: 'canvas', useDirtyRect: false }); var app = {}; var option; option = { title: { text: 'Stacked Area Chart' }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } } }, legend: { data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'] }, toolbox: { feature: { saveAsImage: {} } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'category', boundaryGap: false, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] } ], yAxis: [ { type: 'value' } ], series: [ { name: 'Email', type: 'line', stack: 'Total', areaStyle: {}, emphasis: { focus: 'series' }, data: [120, 132, 101, 134, 90, 230, 210] }, { name: 'Union Ads', type: 'line', stack: 'Total', areaStyle: {}, emphasis: { focus: 'series' }, data: [220, 182, 191, 234, 290, 330, 310] }, { name: 'Video Ads', type: 'line', stack: 'Total', areaStyle: {}, emphasis: { focus: 'series' }, data: [150, 232, 201, 154, 190, 330, 410] }, { name: 'Direct', type: 'line', stack: 'Total', areaStyle: {}, emphasis: { focus: 'series' }, data: [320, 332, 301, 334, 390, 330, 320] }, { name: 'Search Engine', type: 'line', stack: 'Total', label: { show: true, position: 'top' }, areaStyle: {}, emphasis: { focus: 'series' }, data: [820, 932, 901, 934, 1290, 1330, 1320] } ] }; if (option && typeof option === 'object') { myChart.setOption(option); } window.addEventListener('resize', myChart.resize); </script>`pm.visualizer.set(template);結果は次のとおりです。
一般的に、応答データの視覚化を実現するプロセスは 3 つの単純なステップに要約できます: 最初にインターフェイス データを取得し、次に HTML テンプレートを追加し、最後に pm.visualizer.set() 関数を使用して視覚化操作を完了します。 。