JavaScript手写系列(十二)(手写jsonp )

49 阅读1分钟

jsonp

jsonp 的作用是跨域, 原理是通过动态插入script标签来实现跨域, 因为script脚本不受同源策略的限制.它由两部分组成:回调函数和数据

// 这里默认以callback为标识
function jsonp(obj) {
    let { url, data } = obj
    if (!url) return
    const cbFn = `jsonp_${Date.now()}`
    data.callback = cbFn
    return new Promise((resolve, reject) => {
        const head = document.querySelector('head')
        const script = document.createElement('script')
        script.src = `${ url }?${ Object.entries(data).join('&').replace(/[,]/g, '=') }`
        head.appendChild(script)
        
        window[cbFn] = function(res) {
            res ? resolve(res) : reject('error')
            head.removeChild(script)
            window[cbFn] = null
        }
    })
}