Neatly Positioned Magazines

    jsonp-bugfree

    1.0.12 • Public • Published

    如何解决jquery.jsonp方法在并发情况下容易发生异常的bug

    知道现在使用jsonp的公司越来越少了,似乎有比jsonp更好的跨域方案。但是我发现腾讯视屏、爱奇艺视频、优酷土豆等大型互联网公司还在使用它时,我决定写一篇文章彻底解决jsonp在并发条件下报错的问题。毕竟jsonp有最好的兼容性。

    1. 为什么会报错

    你是不是见过以下错误,通常在并发情况下容易出现这个错误,而且是否出错有随机性。

    Uncaught ReferenceError: XXX is not defined

    1.1 相同的jsonpCallback

    造成以上错误的原因是使用了相同的jsonpCallback,由于jquery将jsonpCallback赋值到window上,并且请求完成后会删除回调方法,所以当两个jsonp请求使用相同的jsonpCallback时就会造成冲突。

    1.2 每个请求都使用不同的jsonpCallback就没有问题吗?

    如果每个请求都使用不同的jsonpCallback是可以解决以上报错问题,但是这会引发服务端性能问题。因为服务端可以通过CDN对相同的请求进行缓存,如果每次jsonpCallback都不同,服务端缓存就会失效,流向直接冲击源站。所以对用相同参数的jsonp请求jsonpCallback必须是相同的。如果不同参数或url的jsonp请求使用了相同的jsonpCallback,我们可以在jsonpCallback后面加随机数。

    1.3 那完全相同的jsonp请求在并发时如何处理jsonpCallback冲突的BUG?

    如果出现这种情况,我们在发送请求前判断当前是否有相同的jsonp请求正在发送,如果发生冲突则取消本次请求,等到上一次请求完成后再重新请求。也就是说把并发的请求转换为穿行执行。

    有些人说可以使用async直接把并行转为穿行,不好意思这个参数在jsonp中是无效的。

    1.4 一个隐秘的BUG

    上面提到的解决方案有一个隐秘的BUG。如果不使用jsonp方法返回的延迟对象的话,以上方法没有问题。但是如果使用了延迟对象,你会发现返回的defferd对象可能永远无法触发resolve或者reject。这是应为在发现冲突后jsonp请求被取消,所以请求根本没有发出,jsonp根本不返回defferd对象。这个问题也不难解决,我们可以定义自己的defferd对象,当请求完成后手动触发resolve或者reject。这一切都已经在最终的解决方案中实现了。

    2. 如何使用呢?

    2.0 安装

    npm i jsonp-bugfree

    2.1 依赖

    • jquery 这个不用说,依赖$.ajax()方法
    • md5 其实这个不是必须的,使用它的目的是为了判断请求的url和参数是否和其他请求相同。因为url+参数可能是一个非常长的字符串,使用md5可以控制字符长度。如果你不想使用md5也可以使用其他方法代替。

    2.2 引入模块

    支持amd、commonjs、script标签直接引用。

    2.3 demo

    var myjsonp = new jsonpBugfree();
     
    myjsonp.JSONP({
                    url: 'http://url',
                    data: {
                        test: 1
                    },
                    cache: true,
                    dataType: 'jsonp',
                    jsonp: 'cb',
                    jsonpCallback: 'jsonpCallback',
                    success: function () {
     
                    }
                })
                .then(function () {
                    // todo
                })
                .catch(function () {
                    // todo
                })
     

    Install

    npm i jsonp-bugfree

    DownloadsWeekly Downloads

    0

    Version

    1.0.12

    License

    ISC

    Unpacked Size

    301 kB

    Total Files

    7

    Last publish

    Collaborators

    • billl89