接口测试平台优化：前端json格式化显示效果实现

最近有粉丝问我如何能让前端的多行文本框中的json字符串，能分行且带缩进那样展示出来，而不是堆到一起：

不过这里我要明确说一下，因为接口的返回值不一定是什么格式，可能是普通一段文本，也可以是一个html，也可以是json字符串。所以我一开始并没有对此进行全部统一的json化。

不过我们仍然可以从前端解决掉这件事情，只有当可以json化后的返回体，我们就对其进行格式化显示即可。

如图，我的俩个测试自用接口test_login_A和B,

其中A会返回一段json，B会返回一段字符串

打开P_apis.html 前端修改成如下：

就是在点击请求按钮后调用的ts_send() 方法，发送了请求后的返回值处理部分，改成上图红圈即可。相当于尝试进行json格式化，不行就直接显示。

复制的时候小心别弄错了

 $("li a[href=#response]").click(); //点击一下返回体按钮
 try{
     ret = JSON.parse(ret)
     document.getElementById('ts_response_body').value = JSON.stringify(ret,null,4) ;//把返回值显示到返回值多行文本框中
 }catch{
     document.getElementById('ts_response_body').value = ret
 }

好，让我们看看效果：

A接口返回json时候：

B接口返回其他返回值时候：

好了，本期优化结束，欢迎小伙伴继续提建议哦~