jsonp 原理详解及 jsonp-pro 源码解析

什么是JSONP

JSONP（JSON with Padding）是资料格式JSON的一种“使用模式”，可以让网页从别的网域获取资料。

由于浏览器同源策略，一般来说位于server1.a.com的网页无法与 server2.a.com的服务器沟通，而HTML的 <script>元素是一个例外。利用 <script>元素的这个开放策略，网页可以得到从其他来源动态产生的JSON资料，而这种使用模式就是所谓的 JSONP。用JSONP抓到的数据并不是JSON，而是任意的JavaScript，用 JavaScript解释器执行而不是用JSON解析器解析。

JSONP实现原理

jsonp 概念我们了解了，那么如何实现呢？

我们要获取一段JSON数据没有跨域问题，我们可以通过xhr GET 方式,假设请求地址是当前域下 /apis/data?id=123 ，当前域名是example.com;

返回数据是

{
    name=peng,
    age=18
}

当我们获取的数据不在同域的情况，比如上边的例子请求域名改成example2.com，页面所使用的域名还是example.com，使用 JSONP 的方式去跨域。

1. 根据上面的原理简介，首先我们在全局生命一个函数。

   window.jsonp1 = function(data) {
    console.log(data)
   }

2. 动态的往head标签中插入script标签

   const head = document.getElementByTagName('head')[0]
   // 获取页面的head标签
   
   const script = document.createElement('script')
   // 创建script标签
   
   script.src = 'https://example2.com/apis/data?id=123&callback=jsonp1'
   // 给script标签赋值src地址
   
   head.appendChild(script)
   // 最后插入script标签

3. 最后需要script标签返回的内容是一个方法调用并传入参数是要返回的内容。

   jsonp1({
    name=peng,
    age=18
   })

以上就对JSONP原理进行一个简易的实现。

真正实现一个JSONP网络请求库

以上对JSONP原理和实现有了初步了解，如果我们要在日常项目中使用，那就需要会封装一个完整的JSONP网络请求库。

下面我们对jsonp-pro网络请求库做一个源码分析，从中了解并学习如何封装一个JSONP网络请求库。

先来看看请求的通用方法 method 库

// 检查类型的方法，用于对方法传入类型的限制
/**
 * object check method
 *
 * @param {*} item variable will be check
 * @param {string} type target type. Type value is 'String'|'Number'|'Boolean'|'Undefined'|'Null'|'Object'|'Function'|'Array'|'Date'|'RegExp'
 * @return {boolean} true mean pass, false not pass
 */
function typeCheck(item, type) {
  // 使用 Object.prototype.toString.call 方法，因为这个方法获取类型最全
  const