手写系列之jsonp的实现 - 图1

本文主要是手写了jsonp的实现，以及它的原理

1. 直接上代码

  1. /**
  2.  * @author lihh
  3.  * @description 表示jsonp的实现
  4.  * @param {*} url 传递的url
  5.  * @param {*} keyword 关键字
  6.  * @returns 如果做生产包 还是需要改造的
  7.  */
  8. function jsonp(url, keyword) {
  9.   return new Promise((resolve, reject) => {
  10.     // 每次jsonp的函数名字都是随机的
  11.     const funName = `jsonp${(Math.random() * 100000) | 0}${+new Date()}`
  12.     keyword = keyword || '伏天氏'
  13.     // 请求的url 必须包含callback参数，参数函数必须是全局的，这个将是回调函数
  14.     url = url || `https://www.baidu.com/sugrec?prod=pc&from=pc_web&wd=${keyword}&callback=${funName}`
  15.     // 其实jsonp的原理就是利用了script无跨域限制的特性
  16.     const script = document.createElement('script')
  17.     script.src = url
  19.     // 表示回调函数，之后删除window额外添加的数据
  20.     window[funName] = function (event) {
  21.       resolve(event)
  22.       Reflect.deleteProperty(window, funName)
  23.     }
  24.     script.onerror = reject
  26.     // 添加到head 进行加载
  27.     document.querySelector('head').appendChild(script)
  28.   })
  29. }

2. 代码讲解

  • 首先为了方便调用进行promise封装
  • 每次创建随机的函数，用来jsonp的回调
  • 请求的url中，必须包含callback参数，参数就是新创建的函数
  • 创建script标签，将url赋值给他
  • 其实jsonp的实现原理就是利用了script无跨域限制特性