当接口返回的响应数据结构非常复杂，充斥着嵌套的对象和数组，其中还可能包含着图片的 URL 时，如果要查找特定信息，你需要不断上下滚动 JSON 响应，试图找到所需的字段。这不仅让人恼火，还浪费了宝贵的时间。

Apifox 提供了一种可编程的方法，将复杂的 JSON 响应数据转化为直观的图形化界面，这极大地提高了数据查找的效率，改善了响应的可读性，减少了可能的错误。

例如，你可以将层级复杂的数据结构通过表格来呈现：

将 SVG 格式的图片转成 Base64 编码格式来呈现：

甚至是引入第三方库（如 Echarts、D3.js 等）直接展现图表：

实现可视化响应的方式非常简单，在接口的「后置操作」中添加一个自定义脚本，然后通过 pm.visualizer.set() 函数传参即可，该函数语法如下：

例如：

下面列举出一些常见的例子。

你可以将 JPEG、PNG、WebP 等格式的图片进行可视化。例如某个接口返回如下数据结构：

要实现图片的可视化，需在该接口的后置操作中添加自定义脚本。

第一步，获取接口数据（图片路径）：

第二步，添加 HTML 模板。template 模板用来渲染接口数据，模板中使用 {{}} 包裹变量：

第三步，应用 pm.visualizer.set() 函数，将模板和数据传入其中：

其结果如下：

SVG 图片可将其可视化渲染（比如某些验证码图片）。例如某个接口返回如下数据结构：

要实现 SVG 图片可视化，需在该接口的后置操作中添加自定义脚本。

第一步，获取接口数据（图片路径），并通过 btoa()  方法将其转化为 Base64 编码：

第二步，添加 HTML 模板。模板中使用 {{}} 包裹变量：

第三步，应用 pm.visualizer.set() 函数，将模板以及数据传入：

其结果如下：

当然，一般情况下进行接口测试的时候，如果遇到需要输入图片验证码的场景，通常是给测试的账号添加白名单，跳过图片验证码验证。

一个复杂的 JSON 数据结构，可以通过表格的形式更为直观的呈现数据。例如某个接口返回如下数据结构：

要实现 JSON 可视化，需在该接口的后置操作中添加自定义脚本。

第一步，获取接口数据：

第二步，添加 HTML 模板。如果要循环数组数据，要以 {{#each 变量名}} 开头，{{/each}} 结尾，其中变量用 {{}} 包裹：

第三步，应用 pm.visualizer.set() 函数：

其结果如下：

在后置操作的自定义脚本中，还可以引入第三方库（如 Echarts、D3.js 等）进行图表渲染，操作步骤同上。

例如这个 Echarts 的可视化图表脚本：

其结果如下：

总体来说，实现响应数据可视化的过程可以归结为三个简单的步骤：首先，获取接口数据；其次，添加 HTML 模板；最后，使用 pm.visualizer.set() 函数完成可视化操作。

了解更多关于 Apifox 的「可视化响应数据」的内容，可以点击「阅读原文」前往 Apifox 官方帮助文档查看！