你在讲啥???

你在讲啥???

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

登陆购买课程后可参与讨论,去登陆

4回答
好帮手慕言 2020-01-06 14:23:18

同学你好,关于同学的疑问,解答如下:

1、在视频中,老师是在home.js中,获取的热门推荐数据,所以在home.js中引入了jsonp。

2、可以参考第一条回复:

http://img1.sycdn.imooc.com//climg/5e12d1f709459f2107120500.jpg

3、老师封装的jsonp,返回的是一个promise,可以用then/catch。

4、如果有错误的话,在catch中可以打印出来。

http://img1.sycdn.imooc.com//climg/5e12cb87099c50d703460146.jpg

data是从淘宝接口获取来的数据。要对数据进行进一步处理,才能方便使用

5、需要对url进行处理。也就是url要和传进来的data进行拼接。parseParam是老师自己封装的一个方法。

具体步骤可以参考下方:

http://img1.sycdn.imooc.com//climg/5e12d09809884ad209550413.jpg

6、parseParam方法,只在本js中使用,外部是不使用的,所以并不需要暴露出去。

如果还有其他疑问,建议在问答区重新提问,便于后期查找总结

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

好帮手慕糖 2020-01-05 19:31:13

同学你好,关于你的问题,回答如下:

1、是函数格式, 不过是箭头函数。

使用export default导出的不需要使用var / const来存储。 与home.js中暴露的是两种方式。 一种是export default, 一种是export。

一般使用export导出的时候, 引入的时候需要加{}, 使用export default导出的时候,引入的时候就不需要加{}。老师这里举个简单的示例,帮助同学理解:

(1)如果导入的文件中使用了export导出,如下:

http://img1.sycdn.imooc.com//climg/5e11c7680966b6d604430137.jpg

那么引入的时候,就需要添加{}。

http://img1.sycdn.imooc.com//climg/5e11c778097cd9d704910034.jpg

(2)如果导入的文件中使用了export default导出,就是默认导出的内容:

http://img1.sycdn.imooc.com//climg/5e11c78d096a20b905600152.jpg

那么引入的时候,就不需要添加{}。

http://img1.sycdn.imooc.com//climg/5e11c79d09c2abfd04300027.jpg

(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
    1.jsonp的引入不应该是在Recommend.vue推荐组件上引入的吗?怎么跑到了home.js中引入呢? 3.export default 中3个形参位置是:url 、data、 options 那么:jsonp中的三个形参位置是:url、options、回调 并没有一一对应顺序,不应该是: url、回调、options吗?不影响吗? 4.没明白的点在于:使用axios时务必用.then/.catch 那使用jsonp时,也同样务必用.then/.catch吗? 5.reject中错误捕获到了,在哪打印出来呢?还是说在home.js中的.catch中添加一条错误是的信息呢? jsonp的回调中data参数指的是淘宝中的数据源吗?后面为什么要进行.then异步处理? 7.url += (url.indexOf('?') < 0 ? '?' : '&') + parseParam(data);这句话就是后面看不懂啥意思,需要解释 8.onst parseParam = param => { let params = []; for (const key in param) { params.push([key, encodeURIComponent(param[key])]); } return params.map(value => value.join('=')).join('&'); }; 解释一下每一步的操作呗?还有就是这个常量为什么不放在export暴露的函数内部呢? 你没有解释,代码的意思
    2020-01-06 10:20:09
好帮手慕星星 2020-01-04 16:37:55

同学你好,问题解答如下:

1、jsonp插件中的这些参数名字可以自定义,不是固定的,但是参数位置代表的意思是固定的:

http://img1.sycdn.imooc.com//climg/5e104cfc096dc2a407950342.jpg


资料中详细的解释,可以进行查看:http://file.mukewang.com/class/assist/620/100120/jsonp%E8%B7%A8%E5%9F%9F.pdf

视频中:

http://img1.sycdn.imooc.com//climg/5e104d5309656bfd08300294.jpg

将封装的jsonp.js导入命名为jsonp:

http://img1.sycdn.imooc.com//climg/5e104db709ebd24b04040032.jpg

所以调用jsonp的时候调用的就是导出的函数,也就是这样:

http://img1.sycdn.imooc.com//climg/5e104def09f5b60a17070370.jpg

2、这里使用promise是为了使用then方法拿到获取的数据。返回的是promise对象:

http://img1.sycdn.imooc.com//climg/5e104a6d09e776e907030321.jpg

那么在调用的时候就可以通过then方法拿到数据:

http://img1.sycdn.imooc.com//climg/5e104a890952a1f806920179.jpg

这三个参数就是jsonp插件的参数:

http://img1.sycdn.imooc.com//climg/5e104abc09cb7ecf04120031.jpg

http://img1.sycdn.imooc.com//climg/5e104ad5092ee82205700384.jpg

fn回调中的err参数代表的是错误信息,data代表的是获取到的数据,参数名称自定义。

3、处理拼接的方法是老师自己写的,同学也可以自己封装,不是规定的。

http://img1.sycdn.imooc.com//climg/5e104bc1095f2f5e06600207.jpg

需要和url进行拼接,添加后面的字段,实现这样的结果:

http://img1.sycdn.imooc.com//climg/5e104c3109ee207f09060050.jpg

然后这个地址再通过jsonp(插件)去访问。

同学现在需要理清老师的思路,然后再考虑封装的问题,这样会比较容易一些。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

  • 提问者 看不穿繁华 #1
    1.对于导出的函数,就是export default部分,怎么不是个函数的格式呢? 不需要使用var/const来储存的吗?像之前的home..js暴露的一样呢? 2.jsonp函数中的第3个参数不应该是回调函数fn吗? 怎么直接传参了(err, data),这样可以吗?它也不是一个函数了呀? 3.导出的函数中参数与jsonp函数中的参数,不都属于形参吗?不应该是一一对应的关系吗?为什么2.3参数位置对应不上了? 4.在jsonp函数外面使用Promise对象为的是什么?是为了在Recommend.vue组件中使用then进行异步操作时,避免了回调地域的做法吗? 而且对.then异步操作有问题,它不是axios异步请求吗?jsonp也要用到的吗? 5.jsonp函数中,对已第3个参数里面的判断必须要书写的吗?就是if/else的部分? 如果写的话: reject(err)--------怎么体现出呢?是报错去打印出来吗?也并没有console.log 对于resolve(data)同样是怎么体现出来呢? 6.无论是export暴露出去的函数,还是jsonp中的函数,参数data是不是我们获取淘宝中的数据呢?那为什么最后还要使用.then异步操作呢? 7.url += (url.indexOf('?') < 0 ? '?' : '&') + parseParam(data);解释一下,就是这么规定好的拼接吗? 8.const parseParam = param => { let params = []; for (const key in param) { params.push([key, encodeURIComponent(param[key])]); } return params.map(value => value.join('=')).join('&'); }; 解释一下每一步的操作呗?还有就是这个常量为什么不放在export暴露的函数内部呢?
    2020-01-05 10:14:17
提问者 看不穿繁华 2020-01-04 10:40:25
  1. 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('&');

啥玩意?啥意思?一句我都不懂,格式就这么规定的?

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师