【API接口工具】postman-可视化响应

Postman Visualizer提供了一种可编程的方式来直观地表示您的请求响应。添加到请求测试的可视化代码将呈现在响应正文的“可视化”选项卡中,以及“漂亮”、“原始”和“预览”选项。

可视化响应数据

{
    "code": 10000,
    "msg": "success",
    "data": {
        "token": "7b2f7d76b95a4dc2271ed7ace60da0d1"
    }
}

要可视化您的响应数据,请将代码添加到请求的Pre-request或Tests 脚本。该pm.visualizer.set()方法会将您的可视化工具代码应用于数据,并在请求运行时将其呈现在“可视化”选项卡中。

添加可视化代码

该pm.visualizer.set()方法接受Handlebars模板字符串作为其第一个参数。第二个参数是要使用模板显示的数据。继续阅读以了解如何构建 Handlebars 模板并将数据传递给它。

呈现 HTML

要查看基本的可视化工具,请在 Postman 中打开以下请求:

示例端点使用具有以下 JSON 响应正文结构token进行响应:

{
    "code": 10000,
    "msg": "success",
    "data": {
        "token": "7b2f7d76b95a4dc2271ed7ace60da0d1"
    }
}

可视化工具代码创建一个 Handlebars 模板,此脚本在请求Tests中运行:

var template = `
    <table bgcolor="#FFFFFF">
        <tr>
            <th>token</th>
            
        </tr>

            <tr>
                <td>{{response.data.token}}</td>
            </tr>
    </table>
`;

// Set visualizer
pm.visualizer.set(template, {
    // Pass the response body parsed as JSON as `data`
    response: pm.response.json()
});

该template变量是之前创建的模板字符串。传递的第二个参数是一个定义为response属性的对象——这是模板在{{response.data.token}}循环中期望的变量。分配给该response属性的值是解析为对象的请求的响应 JSON 数据。

查看可视化

在这里插入图片描述

可视化工具 API

您可以从Postman API访问可视化工具。该pm.visualizer.set()方法接受三个参数:

layout(必需):第一个参数是Handlebars HTML 模板字符串。
data(可选):第二个参数是可以绑定到模板的数据。可以在模板中访问该对象的属性。
options(可选):第三个参数options是Handlebars.compile(). 您可以使用它来控制 Handlebars 如何编译模板。
Postman 使用您传递的信息pm.visualizer.set()在可视化工具的沙箱中呈现 HTML 页面。您将在Visualize选项卡中看到这个呈现的 HTML 页面。该layout字符串被插入到呈现页面的 中,包括模板包含的任何 JavaScript、CSS 和 HTML。

调试可视化工具

您可以在 Postman 中通过右键单击Visualize区域并选择检查可视化来调试可视化。这将打开附加到沙箱的可视化开发工具。您可以像调试网页一样使用它。

参考

使用 ChartJS 呈现条形图的 DIY 集合
热图可视化
各种图表和图形示例

产品推荐

推荐理由

postman在国内使用已经越来越困难:
1、登录问题严重
2、Mock功能服务基本没法使用
3、版本更新功能已很匮乏
4、某些外力因素导致postman以后能否使用风险较大
出于以上考虑因此笔者自己开发了一款api调试开发工具SmartApi,满足基本日常开发调试api需求

简介

历时一年半多开发终于smartApi-v1.0.0版本在2023-09-15晚十点正式上线
smartApi是一款对标国外的postman的api调试开发工具,由于开发人力就作者一个所以人力有限,因此v1.0.0版本功能进行精简,大功能项有:

  • api参数填写
  • api请求响应数据展示
  • PDF形式的分享文档
  • Mock本地化解决方案
  • api列表数据本地化处理
  • 再加上UI方面的打磨

下面是一段smartApi使用介绍:
在这里插入图片描述

下载地址:

https://pan.baidu.com/s/1kFAGbsFIk3dDR64NwM5y2A?pwd=csdn

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lichong951

你的鼓励决定更新的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值