接口测试平台代码实现46:接口调试用户异常操作处理

经过45节的学习，很多同学已经达到了一个不错的水准，可以自主找到一些问题并修复和提出改进方法，我很欣慰。

本节我们要处理的是用户异常操作引起的情况。

大部分处理我们最好都在前端上拦截，这样的好处是不通过请求 就可以瞬间提示错误，所以我们基本只打开P_apis.html就可以了。

1. 用户没写全就点保存

找到我们ts_save函数，就是保存的函数。

加入下面这一大堆if判断。

 // 判断顶部的数据是否填充完
if(api_name == ''){alert('请输入接口名字！');return}
if(ts_method == 'none'){alert('请选择请求方式！');return}
if(ts_url == ''){alert('请输入url！');return}
if(ts_host == ''){alert('请输入host！');return}

然后是发请求的函数ts_send：加入这三个必须的if判断

上面只是处理用户不写关键数据的时候的处理。

接下来要进行一些特殊处理，大家也可以借此学习一些js的语法。

所有格式判断我们都要在ts_save和ts_send俩个函数中均写好。

1. 用户的 host不符合格式。

上图中，字符串.slice(0,7) 是截取字符串的意思，0,7 就代表要前7个字符，和python的切片类似。代码含义判断这个host开头是不是http或https。

!= 和python一样就是不等于的意思。&&是且的意思，相当于python的and

后面必须加return，这样js函数就会终止，不会再运行下去了，不然它虽然提示了错误，但是仍然会继续走代码而保存成功。

接下来把这一段复制到ts_send()中：

2.请求头不为空且还不符合字典/json格式：

我们的请求头为空的时候，后台会默认变成{} ，然后代码中转成json发送请求才不会报错。但是防止用户写的不符合标准，所以也要判断。

现在ts_save()中加上：

代码解释：先用if判断header是不是空，不是的话就继续判断能否转换成json，若没问题则继续保存。有问题就捕获异常，提示错误话术并return终止js函数。

 if(ts_header != ''){
      try {
          JSON.parse(ts_header)
      }catch (e) {
          alert('header请求头不符合json规范！');
          return
      }
  }

效果如下：

然后把代码复制到ts_send中：

3.我们发现了一个新bug，就是打开调试层的时候，调试按钮居然显示出来了..

不知道是不是所有小伙伴都和我一样遇到了这个问题。该问题出现的原因在于我们之前加入的按钮组的样式bug。

解决方法：在按钮组上加入属性z-index，强制把层级变成最低的0

4.form-data和x-www-form-urlencoded 的第三方表格仍然出错的同学，请直接复制粘贴最新源码中的P_apis.html全部代码。因为这里我们修改的已经太过复杂了，漏掉一点点代码或者位置不对 都会导致这个第三方表格的bug，这就是不可控度比较高，以前我发现我们公司后台中的日期选择出bug了，前端开发甚至表示改不了，因为第三方的。

当然我们这个表格实际上自己也可以写，但是js代码量会很多。以后有机会我们在直播自己写一个没bug简单的表格吧。