jsonp的实现

jsonp的实现

jsonp的特点：
创建script 通过src来获取数据 后台用FunctionName包裹数据 调用前台设置的FunctionName方法

/**
 * opts:
 *     - param { String } (callback)
 *     - prefix { String } (__jp)
 *     - name { String } (prefix + incr)
 *     - timeout { Number } (60000)
 * @param  {String}   url     fetch url
 * @param  {Object}   opts 配置项
 * @param  {Function} fn      callback
 */
function originJsonp (url, opts, fn) {
    let prefix = opts.prefix || '__jp'
    let id = opts.name || (prefix + '0')
    let param = opts.param || 'callback'
    let target = document.getElementsByTagName('script')[0] || document.head
    let script

    // 清除script 及 定时器
    function clear () {
        if (script.parentNode) {
            script.parentNode.removeChild(script)
        }
        window[id] = {}                
    }

    window[id] = function (data) {
        clear()
        fn && fn(data)
    }

    // 不用判断 > -1   因为~-1 === 0
    url += (~url.indexOf('?') ? '&' : '?') + param + '=' + encodeURIComponent(id);
    url = url.replace('?&', '?');

    script = document.createElement('script')
    script.src = url
    target.parentNode.insertBefore(script, target)
}

function jsonp (url, opts) {
    return new Promise((resolve, reject) => {
        originJsonp(url, opts, (data) => {
            resolve(data)
        })
    })
}

jsonp('https://sug.so.360.cn/suggest?encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=%E6%88%91', {
    'prefix': 'suggest_so'
}).then(res => {
    console.log(res)
})