jsonp的原理介绍及Promise封装
什么叫jsonp?jsonp是json with padding(填充式json或参数式json)的简写,是通过ajax请求跨域接口,获取数据的新实现方式 jsonp的实现原理:动态创建script标签,因为script标签是没有同源策略限制,可以跨域的。 把script标签的src指向正式服务端地址,这个地址跟个参数callback=xxx,服务端在返回数据时,在xxx里包裹一个方法(里面是返回的数据),相当于在前端执行xxx这个方法,但是浏览器并没有这个方法,所以在发送请求之前在window注册这个方法,这样的话相当于在前端执行window.xxx()这个方法去获取数据。 具体看接下来的实现! https://github.com/webmodules... 步骤一:首先安装这个库,因为我是在node npm环境下开发,所以 $ npm install jsonp 参数介绍
fn 回调方法,用es6 Promise 步骤二:下面是具体用法: import originJSONP from 'jsonp' 对外暴露方法 url:请求服务器地址,data:参数 export default function jsonp(url,data,option) { url += (url.indexOf('?')<0?'?':'&')+param(data) return new Promise(function(resolve,reject) { originJSONP(url,option,function(err,data) { if(!err){ resolve(data) }else{ reject(err) } }) }) } 定义一个将Object的参数处理成为 url挂载参数的形式 的函数 export function param(data) { let url = '' for (var k in data) { let value = data[k] !== undefined ? data[k] : '' url += '&' + k + '=' + encodeURIComponent(value) } return url ? url.substring(1) : '' } 到这里 这个Promise 就封装好了,接下来就具体调用来获取数据 步骤三:建一个js文件,名字自己定义 import jsonp from '../common/js/jsonp.js' 定义参数 const commonParams = { g_tk:1319877694,inCharset:'utf-8',outCharset:'utf-8',notice:0,format:'jsonp' }; 定义前后端统一参数 const options = { param:'jsonpCallback' }; 定义获取数据函数 这里我是拿QQ音乐的数据https://m.y.qq.com/(感谢QQ音乐的接口支持) export function getDataFunc() { const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg' const data = Object.assign({},commonParams,{ platform:'h5',uin:0,needNewCode:1,}) return jsonp(url,options) } 到此,咱们就完成用jsonp库进行Promise封装,并获取数据的过程! 感谢阅读! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |