接口管理工具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，並實現展示。