修改网站默认首页/市场营销推广方案怎么做

yapi 中 mock JSONP 接口响应的方法

1. 问题

yapi 具有强大的 mock 能力, 但是它是否可以 mock JSONP 请求呢?

2. 尝试

2.1 yapi 端的准备

普通的 JSON schema 和期望方式, 都只能返回 JSON, 无法在返回中增加 callback 函数名. 我们尝试使用 "高级 mock" 中的 "脚本" 完成这个功能. 如下图所示, 注意 "是否开启" 的部分一定要打开.

image

Mock 脚本如下:varcb=params.callback;

if(!cb){

cb='callback';

}

vara=[0,1,2,3,4,5]

varJSON={

"data":a.map(function(){

return{

name:Random.pick('x','b','e','m'),

age:Random.pick(1,2,3,4),

url:Random.url('http','123.sogou.com'),

time:Random.timestamp()

};

})

}

varres=JSON.stringify(JSON);

mockJson=cb+'('+res+')';

说明:

假设 JSONP 的回调函数名用 callback 参数指定

yapi 脚本中定义了一些全局变量. parmas 允许你取得请求参数. 更多全局变量参见这里.

mockJson 是返回数据.

我们取巧的先生成 JSON, 然后将 JSON 转成字串赋, 拼接 callback 后赋给 mockJson.

2.2 发起 JSONP 请求

http://mybusiness.qqpy.sogou.com/jsonp.html

对应代码如下:thisisa JSONP demo

$.Ajax({

url:'http://dhyapi.sogou/mock/53/jsonpdemo/',

dataType:"jsonp",

JSONP:"callback",

success:function(data){

console.log(data);

}

})

在浏览器上打开页面, 看到如下结果:

image

这说明我们的尝试成功了.

3. 不足

mock 数据时只能使用 Random 系列方法 (占位符), 无法使用模板. 因此可以看到 2.1 中的代码为了 mock 数组, 使用了比较 trick 的方法.

来源: http://www.jianshu.com/p/2c8078113317