jsonp的简单实现

最新推荐文章于 2021-04-07 00:41:50 发布

Mr.Groooooooot

最新推荐文章于 2021-04-07 00:41:50 发布

阅读量188

点赞数

本文链接：https://blog.csdn.net/wdhxs/article/details/111598610

版权

jsonp的简单实现

function jsonp(url, data) {
	// 1.将data中的数据拼接到url中
	let params = '';
	for (key in data) {
	    params += key + '=' + data[key] + '&';
	}
	url += '?' + params + 'callback=cbFn';
	// 2.在全局环境下创建jasonp要调用的回调函数，挂载到window上
	window.cbFn = function(data) {
	    res = data;
	    // 5.成功后删除script节点
	    delete window.cbFn;
	};
	// 3.创建script节点，设置src属性，回调函数名
	const script = document.createElement('script');
	script.setAttribute('type', 'text/javascript');
	script.setAttribute('src', url);
	script.onload = () => {
		document.body.removeChild(script);
	};
	// 4.附加在body节点后
	const body = document.body.appendChild(script);
	}

包装Promise的jsonp

function jsonp(url, params, callbackName) {
   const geneateURL = (url, callbackName) => {
       let res = '';
       const keys = Object.keys(params);
       for (let key of keys) {
           res += `${key}=${params[key]}&`;
       }
       res = url + '?' + res + 'callback=' + callbackName;
       return res;
   };

   return new Promise((resolve, reject) => {
       callbackName = callbackName || Math.random().toString().replace('.', '');
       const script = document.createElement('script');
       const genURL = geneateURL(url, callbackName);
       script.setAttribute('src', genURL);
       window[callbackName] = (data) => {
           resolve(data);
           delete window[callbackName];
           document.body.removeChild(script);
       };
       document.body.appendChild(script);
   });
}