跳到主要内容

响应数据可视化

Apifox 提供了一种可编程的方式可视化响应返回数据。你可以通过易于理解的方式呈现响应数据，团队成员也可以通过可视化响应更清晰的了解当前的接口文档。

截屏

添加自定义脚本​

在前置或后置操作中添加自定义脚本。

截屏

调用方式​

在自定义脚本中引用 pm.visualizer.set() 函数，可视化响应的结果将显示在响应 body 的 Visualize tab 页中。

截屏

示例代码​

在后置操作中使用自定义脚本，提取返回响应中的链接生成 base64 图片：

// 将接口返回数据，封装成自己需要的结构
var resp = {
    response: pm.response.json()
}
// html 模板字符
var template = `<html><img src="{{response.data}}" /></html>`;

// 设置 visualizer 数据。传模板、解析对象。
pm.visualizer.set(template, resp);

pm.visualizer.set()​

该函数接受 3 个参数：

  1. template 参数（必填）

    第一个参数是 Handlebars 接收的 HTML 模版字符串, 这个字符串最终会被渲染在 <body> 下面, 你可以在 template 里面写 <link> 来加载外部 css 样式表, 或者通过 <script> 来加载第三方库。

  2. data 参数（选填）

    接收一个对象, 该对象用于 Handlebars 的模版字符串变量替换。例如：

    const template = `<div>{{name}}</div>`;
    pm.visualizer.set(template, {
        name: 'Apifox'
    })
    // 渲染出来的结果为 <div>Apifox</div>

  3. options 参数（选填）

    与采用 Handlebars.compile() 方法接收的 options 参数一样, 用于配制 Handlebars 如何编译第一个参数传进来的模版字符串。

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

该方法接收的参数是一个函数, 可以让你在 pm.visualizer.set() 中传入的模版字符串中获取你传入的第二个参数的数据。

  1. error 错误信息

  2. data 通过 pm.visualizer.set() 第二个参数传进来的数据

const template = `
    <div>{{name}}</div>
    <script>
        pm.getData(function(err, data){
            // 在回调函数中根据传入的数据做相应的操作
            console.log(data.name)
            // Apifox
        })
    </script>
`
pm.visualizer.set(template, {
    name: 'Apifox'
})
注意

在模版字符串中无法调用 window 对象中的 Worker 和 indexedDB。