手写一个JSONP(promise封装)

前言

  • JSONP以前研究过,最近又有点忘了,写篇本文mark一下,旨在理解记住JSONP的原理及其实现。代码实现用到es6语法,使用promise来封装JSONP方法,本地测试用的自己node搭的服务器,具体代码就不贴了。
  • 一句话阐述下JSONP原理:动态生成一个JavaScript标签,其src由接口url、请求参数、callback函数名拼接而成,利用js标签没有跨域限制的特性实现跨域请求。
  • 有几点需要注意:1.callback函数要绑定在window对象上
    2.服务端返回数据有特定格式要求:callback函数名+'('+JSON.stringify(返回数据) +')'
    3.不支持post,因为js标签本身就是一个get请求
  • 具体代码如下,最后一段是调用函数的示例,这个函数将返回一个promise对象,获取到数据时状态为resolve
    const jsonp = function (url, data) {
      return new Promise((resolve, reject) => {
        // 初始化url
        let dataString = url.indexOf('?') === -1 ? '?' : '&'
        let callbackName = `jsonpCB_${Date.now()}`
        url += `${dataString}callback=${callbackName}`
        if (data) {
         // 有请求参数,依次添加到url
          for (let k in data) {
            url += `&${k}=${data[k]}`
          }
        }
        let jsNode = document.createElement('script')
        jsNode.src = url
        // 触发callback,触发后删除js标签和绑定在window上的callback
        window[callbackName] = result => {
          delete window[callbackName]
          document.body.removeChild(jsNode)
          if (result) {
            resolve(result)
          } else {
            reject('没有返回数据')
          }
        }
        // js加载异常的情况
        jsNode.addEventListener('error', () => {
          delete window[callbackName]
          document.body.removeChild(jsNode)
          reject('JavaScript资源加载失败')
        }, false)
        // 添加js节点到document上时,开始请求
        document.body.appendChild(jsNode)
      })
    }
    jsonp('http://192.168.0.103:8081/jsonp', {a: 1, b: 'heiheihei'})
      .then(result => { console.log(result) })
      .catch(err => { console.error(err) })

总结

  • 个人感觉JSONP用的情况还是比较少吧,如果已经是需要服务端配合来进行跨域的情况,为什么不直接用CORS呢

推荐阅读更多精彩内容

  • 1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined、Nul...
    极乐君阅读 3,424评论 1 99
  • 五十三:请解释 JavaScript 中 this 是如何工作的。1.方法调用模式当一个函数被保存为一个对象的属性...
    Arno_z阅读 166评论 0 2
  • 本博客转自:「作者:若愚链接:https://zhuanlan.zhihu.com/p/22361337来源:知乎...
    韩宝亿阅读 464评论 0 2
  • 在线阅读 http://blog.poetries.top/FE-Interview-Questions 目录 $...
    poetries阅读 34,522评论 13 345
  • 没错,张志明的确很不靠谱。 但我还是被他吸引。 我是一名空姐,在飞机上遇到各种的奇葩旅客数不胜数,也许我可以这么说...
    七月又初五阅读 557评论 0 0