携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第34天，点击查看活动详情
使用postman测试接口时，你是否遇到这样的情况？
即使美化一下，也很难找到自己想要的信息：
接口层级太复杂了，淦！
那么这个时候，你就需要使用postman的visualizer来对返回的数据进行可视化了，可以处理成表格：
输出图片：
甚至是直接展现图表：
使用方式非常简单，在上方的选下卡中，选择Tests，进入一个代码编辑器：
使用pm.visualizer.set方法来输出内容，请求后可以在下方的Visualize选项卡查看：
可以使用pm.response.json()获取已经加载的数据:
而pm.visualizer.set还支持模板语法，因此我们可以这样将获取到的数据输出一个表格：
var template =`
<table style="margin:20px;">
<tr>
<td>id</td>
<td>text</td>
<td>time</td>
</tr>
{{#each dynamic}}
<tr>
<td>{{id_str}}</td>
<td>{{modules.module_dynamic.desc.text}}</td>
<td>{{modules.module_author.pub_time}}</td>
</tr>
{{/each}}
</table>
`
pm.visualizer.set(template, {
dynamic: pm.response.json().data.items
});
模板语法的循环使用的是{{#each 变量名}}开头，{{/each}}结尾，然后其中要取值的变量均使用双大括号{{}}包裹，之后在pm.visualizer.set方法中传入变量对应的取值，就实现了模板渲染一个表格：
此外，这里也支持外部JS库的引入，因此你可以使用<script>标签引入外部的JS库（比如echarts），来实现更多的功能，比如画一个图表：
var template = `
<div id="container" style="height: 100%"></div>
<script src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/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 = {
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
title: {
text: '本周新增粉丝年龄分布'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['0-18', '18-23', '23-35', '35-60', '60以上']
},
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: '0-18',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(128, 255, 165)'
},
{
offset: 1,
color: 'rgb(1, 191, 236)'
}
])
},
emphasis: {
focus: 'series'
},
data: [140, 232, 101, 264, 90, 340, 250]
},
{
name: '18-23',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(0, 221, 255)'
},
{
offset: 1,
color: 'rgb(77, 119, 255)'
}
])
},
emphasis: {
focus: 'series'
},
data: [120, 282, 111, 234, 220, 340, 310]
},
{
name: '23-35',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(55, 162, 255)'
},
{
offset: 1,
color: 'rgb(116, 21, 219)'
}
])
},
emphasis: {
focus: 'series'
},
data: [320, 132, 201, 334, 190, 130, 220]
},
{
name: '35-60',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(255, 0, 135)'
},
{
offset: 1,
color: 'rgb(135, 0, 157)'
}
])
},
emphasis: {
focus: 'series'
},
data: [220, 402, 231, 134, 190, 230, 120]
},
{
name: '60以上',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
label: {
show: true,
position: 'top'
},
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(255, 191, 0)'
},
{
offset: 1,
color: 'rgb(224, 62, 76)'
}
])
},
emphasis: {
focus: 'series'
},
data: [220, 302, 181, 234, 210, 290, 150]
}
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
window.addEventListener('resize', myChart.resize);
</script>
`
pm.visualizer.set(template);
一个图表就可以出现了：
反正，获取到的数据，随你处理，你甚至可以把自己的前端代码直接全都放进来（虽然好像没有什么必要）。
来试试看，美化你的postman输出吧~
