Visualize 可视化数据

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

截屏

添加 pm.visualizer.set()

在 前后置操作-自定义脚本 中，使用 pm.visualizer.set() 方式，可视化代码将显示在响应 body 的 Visualize tab 中。

使用注意

pm.visualizer.set() 方式

该方法接受 3 个参数

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

  2. data 选填参数, 接收一个对象, 该对象用于 HandlebarsVisualize 可视化数据 - 图3 的模版字符串变量替换

    1. const template = `<div>{{name}}</div>`;
    2. pm.visualizer.set(template, {
    3.     name: 'Apifox'
    4. })
    5. // 渲染出来的结果为 <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() 第二个参数传进来的数据

  1. const template = `
  2.     <div>{{name}}</div>
  3.     <script>
  4.         pm.getData(function(err, data){
  5.             // 在回调函数中根据传入的数据做相应的操作
  6.             console.log(data.name)
  7.             // Apifox
  8.         })
  9.     </script>
  10. `
  11. pm.visualizer.set(template, {
  12.     name: 'Apifox'
  13. })

⚠️ 注意! 在模版字符串中你是无法调用 window 对象中的 Worker 和 indexedDB

示例说明

base64 图片-后置脚本

  1. // 将接口返回数据，封装成自己需要的结构
  2. var resp = {
  3.     response: pm.response.json()
  4. }
  5. // html 模板字符
  6. var template = `<html><img src="{{response.data}}" /></html>`;
  8. // 设置 visualizer 数据。传模板、解析对象。
  9. pm.visualizer.set(template, resp);

其他示例请看 可视化响应示例Visualize 可视化数据 - 图4