Jsonp的原理以及如何实现

基本原理

利用script标签的src属性没有跨域限制，通过指向一个需要访问的地址，由服务端返回一个预先定义好的 Javascript 函数的调用，关键的地方在于服务端要在返回的数据外层包裹一个客户端已经定义好的函数，此方法需要前后端配合完成。

实现分析

• 组装请求的url
• 生成script标签
• 定义输出执行结果的函数cb

代码实现

export default function JSONP({
    url,
    params = {},
    callbackKey = 'cb',
    callback
}) {
    // 定义本地的唯一callbackId，若是没有的话则初始化为1
    JSONP.callbackId = JSONP.callbackId || 1;
    let callbackId = JSONP.callbackId;
    // 把要执行的回调加入到JSON对象中，避免污染window
    JSONP.callbacks = JSONP.callbacks || [];
    JSONP.callbacks[callbackId] = callback;
    // 把这个名称加入到参数中: 'cb=JSONP.callbacks[1]'
    params[callbackKey] = `callback`;
    // 得到'id=1&cb=JSONP.callbacks[1]'
    const paramString = Object.keys(params).map(key => {
        return `${key}=${encodeURIComponent(params[key])}`
    }).join('&')
    // 创建 script 标签
    const script = document.createElement('script');
    script.setAttribute('src', `${url}?${paramString}`);
    document.body.appendChild(script);
    // id自增，保证唯一
    JSONP.callbackId++;
}

使用

JSONP({
        url: 'myUrl',
        params: {
            id: 1
        },
        callbackKey: 'cb',
        callback (res) {
            console.log(res)
        }
    })