书接上文,我们回顾一下最后的这个函数:
我们在catch中已经对不可替换的请求体类型做了处理。现在要开始进行try中符合规则的请求体类型了。
这里需要补一句,这里第一层try中可以运行完的只是说不会报错,共俩种:
其中none很显然我们也不需要对其进行替换所以我们这么写:
我们只需要在俩个红色箭头的位置,进行替换规则即可。
数组是二维数组:长这样 [["aa","11"],["bb":"22]]
如果要替换,那我们的循环应该起码是俩层,
第一层我们负责遍历请求体有几个参数,示例有俩个参数
第二层循环遍历预置的替换参数,示例有6个
但是我们需要先加上把这个替换数据的数组声明出来的代码:
接下来就是这个复杂的双层循环替换了。我们要保证每次替换只让目标参数的值依次变成预置替换参数,其他的保持原始正确的值。那么就不要在原始的s上做替换,否则我们会丢失原来的正确的值。
比如 示例中:aa = 11 ,bb =22 俩个参数。当我们遍历aa的时候,aa = '中文', bb=22。然后到了该遍历bb的时候,我们就没办法把aa复原了,因为原始值11已经丢失了。所以我们要新建一个新的请求体作为替身。每次替换前,都让他的值初始化,靠着原始的s,把s的原始值覆盖到这个新替身上即可。
(最后会给大家附上这个函数的完整代码可复制版本)
代码中的深拷贝是jquery的方法:$.extend(true,新,旧)
我们每次都输出打印了下这个新请求体,来看看是不是符合我们预期吧:
大家可以看到,当开始遍历bb的时候,aa成功恢复了原始值11。看来没什么问题。
数组的也就是这个form-data和x-www....的我们完成之后。接下来就是raw-json格式的了。看看现在的代码:
当我们判断出来这是个json串的时候,就对其进行依次替换。
我们遍历这个字典的key,然后依次进行替换,仍然是俩层大循环:
代码如下:
来看下效果:
果然都进行了替换。
所以给大家奉上源码:
function error_play() {
api_body = document.getElementById('error_api_body').value;
ready_error_data = document.getElementById('ready_error_data').value;
//把预替换数据从一个大字符串,按逗号解析成数组。
var r = ready_error_data.split(',');
//判断是不是form-data/x-www...的二维数组格式
try {
var s = eval(api_body);
if(s instanceof Array){
console.log('这是数组');
for(var i=0;i<s.length;i++){ //第一层 判断一共请求体有几个参数就进行几次大循环
for(var j=0;j<r.length;j++){
var new_body = []; //我们不能在s本尊上来回替换,所以弄了个替身,这个替身每次新的参数循环,都会重新被赋值原始s
$.extend(true,new_body, s);
new_body[i][1] = r[j];
console.log(new_body)
}
}
}else{
console.log('这是none');
alert('当前请求体不含任何内容!');
}
}catch (e) {
//若不是就继续判断是不是raw-json的json串格式
try {
var s = JSON.parse(api_body);
console.log('这是字典json')
for(var i in s){
for(var j=0;j<r.length;j++){
var new_body = {};
$.extend(true,new_body, s);
new_body[i] = r[j];
console.log(new_body)
}
}
}catch (e) {
//若也不是,那就不需要做异常值测试了
alert('当前接口的请求体类型不支持异常值测试!')
}
}
}
本节的最后,给大家看一个bug:
就是当我们把请求体变成如下这种带回车的情况时,那么点击异常值测试就会报错,甚至打不开弹层:
这种原因是因为我们在调用这个函数的时候,这个按钮的传参数位置因为有了回车,就变成下面这个样子:
这种直接换行的写法在html中属于引起了语法错误。
那么我们显然在一开始的时候没考虑到这种情况,只是简单的想当然的我们需要这个接口请求体,就传进来的思维。
所以下节课会给大家公布一些解决方案和具体代码。小伙伴也可以自己想想办法,看看怎么解决?欢迎回复:
下节课会讲,把这些替换好的请求体发给后台,让后台去生成请求,并返回返回值,然后前端动态生成各个显示文本框。