咱們來動手寫一個JSONP的插件吧！

前言

Hi~我是Tom，掘金裏寫了一篇關於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)
  })
  複製代碼

• 結果