let index = 0; //仅供参考 jsonp.abort function jsonp(url,query,jsonp){ let script = document.createElement('script'); let result ; let promise = new Promise(function(resolve,reject){ script.onload = function(){ return resolve(result); } script.onerror = function(){ return reject('出错了'); } let callBackName = 'jsonpCallback'+index++; script.src=url+(url.indexOf('?') >=0 ? '&':'?')+jsonp+'='+callBackName; window[callBackName]=function(){//拿给后端进行输出执行的。 result = Array.prototype.slice.call(arguments); } document.head.append(script); }); script.abort = ()=>{ return trigger(script,'error'); }; map.push({promise:promise,request:script});//创建promise和script之间的映射关系，保存到全局的一个数组中。 return promise; }
同样的我们套用上面的xhr的abort函数封装。这样我们就大功告成了。基本的功能我们就全部实现了。我们就可以开始进行调用了。
let promise = jsonp('/test/getUserList','jsonp'); promise.then((result)=>{ console.log('成功了。', result); },(error)=>{ console.log(error); }) abort(promise);
总结
虽然，我们已经完成了封装，但是还有很多的意外没有考虑，要想再实战中运用还必须进行封装和重构。我们必须重视abort方法在xhr/jsonp中的运用，但是也不能滥用，适可而止。存在多层服务器调用时，应该更需要慎重考虑。
要想了解更多，可以参考这是我封装好的一个Promise版本的ajax/jsonp库https://github.com/Yi-love/xhrp，大家也可以通过本地进行下载。
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
您可能感兴趣的文章: