「jsonp」JSONP in Vue

首先推销一下自己封装的包：simple-promisify-jsonp ，npm i simple-promisify-jsonp 就够了

如何使用

• 这段代码实现了promise的jsonp请求。

• 使用方法：

  // link String,支持jsonp的get请求链接
  // params Object,除了callback之外的参数
  this.$setJsonp(link, params)
    .then(res => {
        // success
    })
    .catch(err => {
        // fail
    })
  

• 声明，放在插件的js文件里

  Vue.prototype.$setJsonp = function (url, params = null) {
    return new Promise((resolve, reject) => {
        let randomStr = (function () {
            return (Math.floor(Math.random() * 100000) * Date.now()).toString(16)
        })()
        let sc = document.createElement('script')
        let paramsStr = ''
        if (params) {
            Object.keys(params).forEach(key => {
                paramsStr += `&${key}=${params[key]}`
            })
        }
        sc.setAttribute('src', `${url}?callback=jsonp${randomStr}${paramsStr}`)
        sc.setAttribute('name', `jsonp${randomStr}`)
        sc.addEventListener('error', onError)
        document.querySelector('body').appendChild(sc)
        window[`jsonp${randomStr}`] = function (res) {
            resolve(res)
            delete window[`jsonp${randomStr}`]
            sc.removeEventListener('error', onError)
            document.querySelector('body').removeChild(document.querySelector(`script[name=jsonp${randomStr}]`))
        }
        function onError (err) {
            reject(err)
        }
    })
  }
  

什么是JSONP？

利用