- 标签
- 热门文章
Postman实用小技巧分享
分享一个非常实用的postman小功能,
postman 可视化很多时候, 用postman请求大接口,一大堆响应根本看不清. 有时候还要用 Ctrl+F 来查找是否返回了某个需要的值.但是就在body的右边一点点, Visualize 标签里, 隐藏了一个可以自定义到底展示哪些内容de功能.Visualizer 基础用法 - 取某些值比如说, 前面的body响应内容我只想看到 headers.User-Agent 这部分, 我可以写一个模板, 当请求拿到响应时候, 自动提取这部分来渲染模板.let tpl = `
{{headers.User-Agent}}
`;
pm.visualizer.set(tpl, pm.response.json())
这段脚本粘贴到Tests部分, 请求完就自动处理并渲染模板,生成html了. postman实质上内置了一个浏览器.Visualize 进阶用法 - 完整利用 mustache模板语法写过前端的朋友可以已经注意到了, {{xxx}}这个语法, 是标准的胡子(mustache)语法.
这里postman用的是handlebars变种, 基本上和胡子兼容, 可以随心所欲的按照写前端模板的方法来书写.下面代码, 就实现了一个获取所有响应内容并循环输出成 table的模板.let tpl = `
<table>
{{#each results}}
<tr>
<td>{{title}}</td> <td>{{release_date}}</td>
</tr>
{{/each}}
</table>
`;
pm.visualizer.set(tpl, pm.response.json())
动起来~ 引入复杂的js内容除了渲染成html, 最有意思的是,这里模板里甚至可以包含js,我们完全可以把这个模板当成一个完整的网页来做.
比如下面没有使用响应的内容,单纯是随机画一个圆到canvas上.
let tpl = `
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.8.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.8.0/addons/p5.sound.min.js"></script>
</head>
<body>
<main>
</main>
<script>
function setup() {
createCanvas(800, 300);
frameRate(3)
}
function draw() {
background(0);
circle(random(width), random(height), 15)
}
</script>
</body>
</html>
`;
pm.visualizer.set(tpl, pm.response.json())
更高端的技巧 - 数据预处理和 pm.getData 交互接下来还是回到星战, 我们来统计下响应中70,80,90哪个年代出片更多,并画个bar图const res = pm.response.json();
const grouped = res.results.groupBy(x=>x.release_date.split('-')[0].substr(0,3)+'0')
const vizData = {
data: Object.entries(grouped).map(x=>x[1].length),
labels: Object.entries(grouped).map(x=>x[0])
};
var template = `
<canvas id="myChart" height="75"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: "bar",
data: {
labels: [],
datasets: [{
data: [],
backgroundColor: ["#003f5c", "#58508d", "#bc5090", "#ff6361", "#ffa600"],
}]
},
options: {
legend: { display: false },
scales: {
xAxes: [{
display: true,
}],
yAxes: [{
display: true,
ticks: {
min:0,
max:3
}
}]
}
}
});
pm.getData((err, value) => {
myChart.data.datasets[0].data = value.data;
myChart.data.labels = value.labels;
myChart.update();
});
</script>`;
pm.visualizer.set(template, vizData);
这部分引入了一个chart.js 插件,处理图表内容,和普通前端代码没什么区别.
重点是这部分: pm.getData((err, value) => {
myChart.data.datasets[0].data = value.data;
myChart.data.labels = value.labels;
myChart.update();
});
postman提供了一个回调接口pm.getData((err,value)=>{})可以用来处理传入的值. 接收参数,但是并不在模板里直接使用时候,可以用这个方式来处理参数.
上一条：postman工具
下一条：Postman详细介绍
沪公网安备31011302006932号