基于JSONP原理解析(推荐)(2)

日期：2020-05-11 栏目：程序人生浏览：次

上面基本上完成了一个jsonp方法的核心，此时，jsonp0是我们声明好的一个函数，如果服务端正常回传的时候，就会执行jsonp0函数，里面的successCallback回调也会执行。

完善一下

在实际情况下，通常会有许多个jsonp的请求同时调用，

那么既然jsonp0就能满足我们的需要，为什么常常看到jsonp1，jsonp2等等依次累加的代码呢？

这是因为，请求可能是很多个异步进行。在第一次执行jsonp方法时，window.jsonp0是函数A，此时去加载js文件，在js未加载完毕的情况下，又调用了一次jsonp方法，此时，window.jsonp0指向了函数B。那么等到两次的js加载完毕以后，都会执行第二次的回调。

所以，我们需要对callback的名字做一个区别处理，累加就能满足需要。

修改一下代码：

var jsonpCounter = 0;
function jsonp (url, successCallback, errorCallback, completeCallback) {
 
 var jsId = 'jsonp' + jsonpCounter++;
 
 // 声明对象，需要将函数声明至全局作用域
 window[jsId] = function (data) {
  successCallback(data);
  if (completeCallback) completeCallback();
  clean();
 }
 // 创建script标签，并将url后加上callback参数
 var 
  script = document.createElement('script')
  , url = url + (url.indexOf('?') == -1 ? '?' : '&') + 'callback=' + jsId
 ;
 script.src = url;
 document.head.parentNode.insertBefore(script, document.head);
 // 等到script加载完毕以后，就会自己执行
 
 //在执行完我们这个方法以后，会有很多script标签出现在head之前，我们需要手动的删除掉他们。
 function clean () {
  script.parentNode.removeChild(script);
  window[jsId] = function(){};
 }
}

加入了累加和清理之后，还有一个重要的地方需要处理，就是错误回调。正常来说，我们通常请求jsonp时，会设定一个超时时间，如果超过这个时间以后，就抛出超时异常。

实现如下：

var jsonpCounter = 0;
function jsonp (url, successCallback, errorCallback, completeCallback, timeout) {
 // 略去上面写过的代码
 var 
  timeout = timeout || 10000
  , timer
 ;
 if (timeout) {
  timer = setTimeout(function () {
   if (errorCallback) {
    errorCallback(new Error('timeout'));
   }
   clean();
  }, timeout)
 }
 
 function clean () {
  script.parentNode.removeChild(script);
  window[jsId] = function(){};
  if (timer) clearTimeout(timer);
 }
}

这样，基本上就完成了jsonp的全部功能，剩下的可能需要做一些兼容的修改，才算是一个完整的jsonp方法。

REFER

《高性能JavaScript》

npm上的一个jsonp实现，JSONP

以上这篇基于JSONP原理解析(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持黑区网络。

基于JSONP原理解析(推荐)(2)

相关推荐