关于前端:接口管理工具ApiPost使用响应结果可视化

可视化的应用场景

咱们在申请一个接口时，其响应后果往往是一串 Json 或者其余字符串，不足对应的可视化成果。如图

这样的后果尽管能在个别状况下能满足后端人员调试的须要，然而针对其余人员，比方前端或者测试人员，看起来就有些不太直观。

咱们能够通过可视化性能，将这段 json 通过自定义表格的形式出现进去。如图：

如何实现响应后果可视化？

如何实现这样的成果呢？

从 ApiPost V5.3.1 版本开始，咱们在后执行脚本中新增了 apt.Visualizing(template, obj) 办法，用于实现响应可视化。以上成果的实现代码如下（放到接口的后执行脚本）：

let template=` 
<h1>{{title}}</h1>
<table>
<tr>
   <td> 新闻 ID</td>
   <td> 题目 </td>
</tr>
{{each list item}}
    <tr>
        <td>{{item.article_id}}</td>
        <td>{{item.title}}</td>
    </tr>
{{/each}}
</table>` // 定义展现模板

apt.Visualizing(template, {title:"可视化演示", list:response.json.list}) // 传入展现数据并可视化展现。其中 response.json 的意思是返回的 json，具体能够下文。

附一：模板语法

变量打印

{{var}}

循环

{{each list item}}
    {{$item}}
{{/each}}

条件

{{if value}} ... {{/if}}

{{if v1}} 
... 
{{else if v2}} 
... 
{{/if}}

附二：响应数据变量

response.raw：原始响应数据

调用示例：

response.raw.status // 响应状态码（200、301、404 等）response.raw.responseTime // 响应工夫（毫秒）response.raw.type // 响应类型（json 等）response.raw.responseText // 响应文本 

response.json：json 格局的响应数据

调用示例如下面示例：

response.json.data.token // 也能够 response.json.data["token"]

response.headers：响应头

调用示例：

response.headers.server // 也能够 response.headers["server"]

response.cookies：响应 cookie

调用示例：

response.cookies.PHPSESSION // 也能够 response.cookies["PHPSESSION"]

附三：可视化办法

apt.Visualizing(template, data)

办法的作用是将数据 data 的值传递给模板 template，并实现展现。