jsonp跨域 封装通用方法

jsonp跨域 封装通用方法

//用法如下
jsonp({
	url:"http://localhost:3000/say",
	params:{wd:'你好,服务端!'},
	callback:'show'
}).then(data=>{
	console.log(data);
});

//封装实现
function jsonp({url,params,callback}){//异步执行返回promise
	return new Promise((resolve,reject)=>{
		//创建script标签
		let script = document.createElement('script');
		//声明回调
		window[callback] = function(data){
			resolve(data);
			//删除script标签
			document.body.removeChild(script);
		}
		//解构参数
		params = {...params,callback}
		let arr = [];
		//拼接处理
		for(let key in params){
			arr.push(`${key}=${params[key]}`)
		}
		script.src = `${url}?${arr.join('&')}`;
		//添加到body
		document.body.appendChild(script);
	})
}

//借鉴  珠峰架构课姜文老师
server.js
//服务端代码
let express = requeire('express');
let app = express();
app.get('/say',function(req,res){
	let {wd,callback} = req.query;
	res.end(`${callback}('你好!客户端')`)
})
app.listen(3000)
posted @ 2019-12-19 17:35  娜辉  阅读(271)  评论(0编辑  收藏  举报