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

简介: 经过45节的学习,很多同学已经达到了一个不错的水准,可以自主找到一些问题并修复和提出改进方法,我很欣慰。 本节我们要处理的是用户异常操作引起的情况。大部分处理我们最好都在前端上拦截,这样的好处是不通过请求 就可以瞬间提示错误,所以我们基本只打开P_apis.html就可以了。
  1.  用户没写全就点保存

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

微信图片_20220621120419.png

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

微信图片_20220621120428.png


// 判断顶部的数据是否填充完
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判断微信图片_20220621120434.png

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

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

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

  1. 用户的 host不符合格式。
    微信图片_20220621120441.png

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

!= 和python一样就是不等于的意思。&&是且的意思,相当于python的and微信图片_20220621120452.png

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

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

微信图片_20220621120503.png

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

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

现在ts_save()中加上:

微信图片_20220621120511.png

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

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

效果如下:微信图片_20220621120518.png然后把代码复制到ts_send中:微信图片_20220621120524.png

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

微信图片_20220621120531.png

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

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

微信图片_20220621120539.png

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

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

相关文章
|
1月前
|
数据可视化 前端开发 测试技术
接口测试新选择:Postman替代方案全解析
在软件开发中,接口测试工具至关重要。Postman长期占据主导地位,但随着国产工具的崛起,越来越多开发者转向更适合中国市场的替代方案——Apifox。它不仅支持中英文切换、完全免费不限人数,还具备强大的可视化操作、自动生成文档和API调试功能,极大简化了开发流程。
|
2天前
|
人工智能 自然语言处理 测试技术
Potpie.ai:比Copilot更狠!这个AI直接接管项目代码,自动Debug+测试+开发全搞定
Potpie.ai 是一个基于 AI 技术的开源平台,能够为代码库创建定制化的工程代理,自动化代码分析、测试和开发任务。
65 19
Potpie.ai:比Copilot更狠!这个AI直接接管项目代码,自动Debug+测试+开发全搞定
|
5天前
|
JSON 前端开发 测试技术
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
43 10
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
|
3天前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
25 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
24天前
|
前端开发 JavaScript 测试技术
使用ChatGPT生成登录产品代码的测试用例和测试脚本
使用ChatGPT生成登录产品代码的测试用例和测试脚本
75 35
|
24天前
|
JavaScript 前端开发 Java
使用ChatGPT生成关于登录产品代码的单元测试代码
使用ChatGPT生成关于登录产品代码的单元测试代码
41 16
|
1月前
|
存储 测试技术 数据库
接口测试工具攻略:轻松掌握测试技巧
在互联网快速发展的今天,软件系统的复杂性不断增加,接口测试工具成为确保系统稳定性的关键。它如同“翻译官”,模拟请求、解析响应、验证结果、测试性能并支持自动化测试,确保不同系统间信息传递的准确性和完整性。通过Apifox等工具,设计和执行测试用例更加便捷高效。接口测试是保障系统稳定运行的第一道防线。
|
1月前
|
Web App开发 JSON 测试技术
API测试工具集合:让接口测试更简单高效
在当今软件开发领域,接口测试工具如Postman、Apifox、Swagger等成为确保API正确性、性能和可靠性的关键。Postman全球闻名但高级功能需付费,Apifox则集成了API文档、调试、Mock与自动化测试,简化工作流并提高团队协作效率,特别适合国内用户。Swagger自动生成文档,YApi开源但功能逐渐落后,Insomnia界面简洁却缺乏团队协作支持,Paw仅限Mac系统。综合来看,Apifox是国内用户的理想选择,提供中文界面和免费高效的功能。
|
2月前
|
监控 JavaScript 测试技术
postman接口测试工具详解
Postman是一个功能强大且易于使用的API测试工具。通过详细的介绍和实际示例,本文展示了Postman在API测试中的各种应用。无论是简单的请求发送,还是复杂的自动化测试和持续集成,Postman都提供了丰富的功能来满足用户的需求。希望本文能帮助您更好地理解和使用Postman,提高API测试的效率和质量。
135 11
|
3月前
|
JSON Java 测试技术
SpringCloud2023实战之接口服务测试工具SpringBootTest
SpringBootTest同时集成了JUnit Jupiter、AssertJ、Hamcrest测试辅助库,使得更容易编写但愿测试代码。
92 3