实现jsonp,传入URL,callback和callbackName 三个参数

x33g5p2x  于2022-04-12 转载在 其他  
字(0.7k)|赞(0)|评价(0)|浏览(404)

一、写在前面
今天总结一下阿里前端的一道笔试题,实现jsonp,传入URL,callback和callbackName 三个参数。这里的URL是地址字符串,callback是回调函数,callbackName后端返回数据的名称
二、手写

<script>

    function jsonp(url, callbackName, callback) {
      return new Promise((resolve, reject) => {
        try {
          let str = `${url}?callback=${callbackName}`
          let scriptEle = document.createElement('script')
          scriptEle.type = 'text/javascript'
          scriptEle.src = str
          scriptEle.addEventListener('load', callback)
          window[callbackName] = function (data) {
            resolve(data)
            document.body.removeChild(scriptEle)
          }
          document.body.appendChild(scriptEle)
        } catch (err) {
          reject(err)
        }
      })
    }

    jsonp('http://127.0.0.1:3000/home', 'fun1', () => {console.log('加载成功')}).then(res => {
      console.log(res)
    })

  </script>

相关文章