原理
利用script标签的src属性的不受同源策略的限制，其主要的实现方式就是创建callback方法、动态创建script标签, 并且执行后台返回的回调
// 实现
function jsonp({ url, params, callback }) {
return new Promise((resolve, reject) => {
var script = document.createElement('script');
window[callback] = function(data){
resolve(data);
document.body.removeChild(script);
}
params = {...params,callback};
let arrs = [];
for(let key in params){
arrs.push(`${key} = ${params[key]}`);
}
// 2. 创建script标签
script.src = `${url}?${arrs.join('&')}`;
// http:// localhost:3000/show?callback=fn
docuemnt.getElementsByTagName('head')[0].appendChild(script)
})
}
// 使用
function fn(data) {
console.log(data)
}
jsonp({
url: 'http://localhost:300/show',
params: {},
callback: 'fn' // 1. 创建callback 的方法
}).then(data => {
console.log(data);
})
// 服务器端
let express= require('express');
let app = express();
app.get('/show',(req,res) =>{
let {callback} = req.query;
res.send('hello`);
})
app.listen(3000)
