我们来动手写一个JSONP的插件吧!

·  阅读 2294
我们来动手写一个JSONP的插件吧!

前言

Hi~ 之前在掘金里写了一篇关于JSONP请求的博客,简述了JSONP的相关概念以及使用。

传送门:一分钟说完JSONP请求,面试满分答案ヾ(≧▽≦*)o

这篇分享的东西算是对上文的一种补充,让大家通过代码更为形象的了解JSONP请求

思路

图示:

关键点:

  • 每次请求完成之后,必须清空产生的多余无用的方法和标签
  • 包装成promise对象,使用起来就像axios一样
  • 自动生成接收函数,无需用户考虑,我们要做的是把值传递回去

代码实现

话不多说,先上代码

function myJsonp(options) {
	return new Promise((resolve, reject) => {
                //判断是否是第一次jsonp请求
		if (!window.jsonpNum) {
			window.jsonpNum = 1
		} else {
			window.jsonpNum++
		}

		let {					
			url,
			data,
			timeout = 5000,
			cbkey = 'callback',
		} = options
        
		//保证每次请求接收的方法都不会重复
		let funName = 'jsonpReceive' + window.jsonpNum
        
		//清除本次jsonp请求产生的一些无用东西
		function clear() { 							
			window[funName] = null
			script.parentNode.removeChild(script);
			clearTimeout(timer)
		}
		
                //定义jsonp接收函数
		window[funName] = function(res) {
                        //一旦函数执行了,就等于说请求成功了
			resolve(res) 							
			clear()
		}
		
                //请求超时计时器
		let timer = setTimeout(() => {				
			reject('超时了')
			clear()
		}, timeout)
		
                //定义请求的参数
		let params = '' 								
		
                //如果有参数
		if (Object.keys(data).length) { 			
			for (let key in data) {
				params += `&${key}=${encodeURIComponent(data[key])}`;
			}
			
			params = params.substr(1)
		}
		
                //拼接最终的请求路径,结尾拼接回调的方法名
		url = url + '?' + params + `&${cbkey}=${funName}`  	

		let script = document.createElement('script');
		script.src = url;
		document.body.appendChild(script);
	})
}
复制代码

调用

  • 测试QQ音乐获取首页轮播图的JSONP接口

    let options = {
    	url:'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg',
    	cbkey: 'jsonpCallback',
    	data: {
    		g_tk: 1928093487,
    		inCharset: 'utf-8',
    		outCharset: 'utf-8',
    		notice: 0,
    		format: 'jsonp',
    		platform: 'h5',
    		uin: 0,
    		needNewCode: 1
    	},
    	// QQ音乐接口Jsonp字段
    }
    
    myJsonp(options)
    .then(res => {
    	console.log(res);
    },err=>{
    	console.log(err)
    })
    复制代码
  • 结果

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改