你在讲啥???
jsonp.js
import jsonp from 'jsonp';
// {
// page: 1,
// psize: 20
// }
// page=1&psize=20
const parseParam = param => {
let params = [];
for (const key in param) {
params.push([key, encodeURIComponent(param[key])]);
}
// [[page, 1], [pszie, 20]]
return params.map(value => value.join('=')).join('&');
// [[page, 1], [pszie, 20]]
// [page=1, psize=20]
// page=1&psize=20
};
export default (url, data, options) => {
url += (url.indexOf('?') < 0 ? '?' : '&') + parseParam(data);
return new Promise((resolve, reject) => {
jsonp(url, options, (err, data) => {
if (err) {
reject(err);
} else {
resolve(data);
}
});
});
};
想骂人了,讲的是屎吗?一部都听不明白,每一步都不解释是干嘛的,你让我学?
正在回答 回答被采纳积分+1
同学你好,关于同学的疑问,解答如下:
1、在视频中,老师是在home.js中,获取的热门推荐数据,所以在home.js中引入了jsonp。
2、可以参考第一条回复:
3、老师封装的jsonp,返回的是一个promise,可以用then/catch。
4、如果有错误的话,在catch中可以打印出来。
data是从淘宝接口获取来的数据。要对数据进行进一步处理,才能方便使用
5、需要对url进行处理。也就是url要和传进来的data进行拼接。parseParam是老师自己封装的一个方法。
具体步骤可以参考下方:
6、parseParam方法,只在本js中使用,外部是不使用的,所以并不需要暴露出去。
如果还有其他疑问,建议在问答区重新提问,便于后期查找总结
如果我的回答帮到了你,欢迎采纳,祝学习愉快~
同学你好,关于你的问题,回答如下:
1、是函数格式, 不过是箭头函数。
使用export default导出的不需要使用var / const来存储。 与home.js中暴露的是两种方式。 一种是export default, 一种是export。
一般使用export导出的时候, 引入的时候需要加{}, 使用export default导出的时候,引入的时候就不需要加{}。老师这里举个简单的示例,帮助同学理解:
(1)如果导入的文件中使用了export导出,如下:
那么引入的时候,就需要添加{}。
(2)如果导入的文件中使用了export default导出,就是默认导出的内容:
那么引入的时候,就不需要添加{}。
(3)两者有如下区别可以注意下:
a、export default 向外暴露的成员,可以使用任意变量来接收
b、一个模块中,export default 只允许向外暴露一次
c、一个模块中,可以同时使用export default 和export 向外暴露成员
d、使用export向外暴露的成员,需要使用{ }的形式来接收
e、使用export导出的成员,必须严格按照导出时候的名称,来使用{ }按需接收(使用export导出的成员,如果想换个变量名称接收,可以使用as来起别名)
2、是回调函数, 不过是个箭头函数的形式,(err, data) 是箭头函数的参数, 后面还有其他的内容, => 后面是函数体
3、不知道同学说的具体是哪两个, 建议: 可以截图详细的说明是哪些参数没有对应上。
4、是的, axios是发送请求, 但是jsonp就是处理跨域问题的一种方法, 也是可以用到Promise的。
5、不是必须的, 可以根据需求, 但是这里是两个状态, 一个是没有获取到, 是错误的, 另一个是正确获取到数据的, 所以还是建议分开写。 一般情况下不能百分百保证能获取到数据, 或者说一定是错的(就是说不能确定的说只有一个状态), 所以还是需要判断下。
6、是的, data只是获取到的数据, 后面then中是对获取的这个输出的处理。
7、不是规定好的, 前半部分一般情况下都是这么写的。 后半部分的话, 是老师根据获取的数据, 以及我要使用的数据封装的转化的方法, 这个可以根据具体的格式来修改。
8、声明一个箭头函数, 参数为param。
函数内部声明一个空数组params。
对传递过来的参数进行遍历。
将变量的内容, 作为一个数组, 压入到数组params中, 得到一个二维数组。
对二维数组进行操作, 使用等号链接的字符串( 这个部分课程中老师有一步步的分析, 可以再观看下视频, 结合理解下)。
祝学习愉快~
同学你好,问题解答如下:
1、jsonp插件中的这些参数名字可以自定义,不是固定的,但是参数位置代表的意思是固定的:
资料中详细的解释,可以进行查看:http://file.mukewang.com/class/assist/620/100120/jsonp%E8%B7%A8%E5%9F%9F.pdf
视频中:
将封装的jsonp.js导入命名为jsonp:
所以调用jsonp的时候调用的就是导出的函数,也就是这样:
2、这里使用promise是为了使用then方法拿到获取的数据。返回的是promise对象:
那么在调用的时候就可以通过then方法拿到数据:
这三个参数就是jsonp插件的参数:
fn回调中的err参数代表的是错误信息,data代表的是获取到的数据,参数名称自定义。
3、处理拼接的方法是老师自己写的,同学也可以自己封装,不是规定的。
需要和url进行拼接,添加后面的字段,实现这样的结果:
然后这个地址再通过jsonp(插件)去访问。
同学现在需要理清老师的思路,然后再考虑封装的问题,这样会比较容易一些。
如果我的回答帮助到了你,欢迎采纳,祝学习愉快~
export default (url, data, options) 上来为啥三个参数,这三个参数跟gitHub上的
url (String) url to fetch
opts (Object), optional
param (String) name of the query string parameter to specify the callback (defaults to callback)
timeout (Number) how long after a timeout error is emitted. 0 to disable (defaults to 60000)
prefix (String) prefix for the global callback functions that handle jsonp responses (defaults to __jp)
name (String) name of the global callback functions that handle jsonp responses (defaults to prefix + incremented counter)
fn callback
也不一样,看不懂!data是什么玩意儿?
2.到底它什么时候使用Promise这个大哥,我不明白啥使用啥
return new Promise((resolve, reject) => {
jsonp(url, options, (err, data) )=> {
if (err) {
reject(err);
} else {
resolve(data);
}
});
});
(url, options, (err, data) )这参数又是大佬规定好的?
if (err) {
reject(err);
} else {
resolve(data);
}
啥玩意?
3.
const parseParam = param => {
let params = [];
for (const key in param) {
params.push([key, encodeURIComponent(param[key])]);
}
return params.map(value => value.join('=')).join('&');
啥玩意?啥意思?一句我都不懂,格式就这么规定的?
- 参与学习 人
- 提交作业 239 份
- 解答问题 10739 个
本阶段带你深入前端开发的肌理,通过ES6基础知识和前端主流高级框架的学习,助你快速构建企业级移动webAPP应用,进入职场的终极battle
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星