手撕JSONP

JSONP

虽然XMLHttpRequest对象遵循同源政策，但是script标签不一样，它可以通过 src 填上目标地址从而发出 GET 请求，实现跨域请求并拿到响应。这也就是 JSONP 的原理，JSONP只支持GET请求

JSONP封装实现流程：

// index.html
function jsonp({ url, params, callback }) {
return new Promise((resolve, reject) => {
let script = document.createElement('script') //动态生成script标签
window[callback] = function(data) { //声名回调函数 
resolve(data)
document.body.removeChild(script)
}
params = { ...params, callback } // {wd：b，callback：show} 拷贝params对象并与callback合并
let arrs = []
for (let key in params) {
arrs.push(`${key}=${params[key]}`) //{wd=b}{callback=show} 
}
script.src = `${url}?${arrs.join('&')}`  //url+?+wd=b&callback=show
document.body.appendChild(script) // 删标签
})
}
jsonp({
url: 'http://localhost:3000/say',
params: { wd: 'Iloveyou' },
callback: 'show'
}).then(data => {
console.log(data)
})
 
 
 
// server.js
let express = require('express')
let app = express()
app.get('/say', function(req, res) {
let { wd, callback } = req.query
console.log(wd) // Iloveyou
console.log(callback) // show
res.end(`${callback}('我不爱你')`)
})
app.listen(3000)

1.声名一个回调函数，函数名当作参数值传递给跨域请求的服务器，函数形参接收服务器返回的data

2.创建一个<script>标签，设置其url为跨域接口地址+前端参数params+回调函数名，如上url+?+wd=b&callback=show

3.服务器收到请求后，把传递进来的函数名和要返回给客户端的数据拼接成字符串，如show('数据包')

4.客户端收到服务器返回的数据show（'数据包'）后执行回调函数