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

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

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

  1. <script>
  2. function jsonp(url, callbackName, callback) {
  3. return new Promise((resolve, reject) => {
  4. try {
  5. let str = `${url}?callback=${callbackName}`
  6. let scriptEle = document.createElement('script')
  7. scriptEle.type = 'text/javascript'
  8. scriptEle.src = str
  9. scriptEle.addEventListener('load', callback)
  10. window[callbackName] = function (data) {
  11. resolve(data)
  12. document.body.removeChild(scriptEle)
  13. }
  14. document.body.appendChild(scriptEle)
  15. } catch (err) {
  16. reject(err)
  17. }
  18. })
  19. }
  20. jsonp('http://127.0.0.1:3000/home', 'fun1', () => {console.log('加载成功')}).then(res => {
  21. console.log(res)
  22. })
  23. </script>

相关文章