接口测试平台-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判断

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

 

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

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

• 用户的 host不符合格式。

// 判断关键数据是否符合规则
if (ts_host.slice(0, 7) !== 'http://' && ts_host.slice(0, 8) !== 'https://') {
    alert('host必须以http://或https://开头！')
    return;
}

 

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

 

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

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

先在ts_save()中加上：

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

然后把代码复制到ts_send中：

 

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

该问题出现的原因在于我们之前加入的按钮组的样式bug。

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

 

• form-data和x-www-form-urlencoded 的第三方表格仍然出错的同学，请直接复制粘贴最新源码中的P_apis.html全部代码。

因为这里修改的已经太过复杂了，漏掉一点点代码或者位置不对 都会导致这个第三方表格的bug，这就是不可控度比较高，以前发现公司后台中的日期选择出bug了，前端开发甚至表示改不了，因为第三方的。

当然这个表格实际上自己也可以写，但是js代码量会很多。

以后有机会再直播自己写一个没bug简单的表格吧。