美文网首页让前端飞Web前端之路
自己封装的JSONP请求,如何异常处理

自己封装的JSONP请求,如何异常处理

作者: 竿牍 | 来源:发表于2020-04-01 21:09 被阅读0次

    自己封装的JSONP异常处理,原理还是利用超时

    var JSONP = (function () {
        var counter = 0,
            head, query, key, window = this;
    
        function load(url) {
            var script = document.createElement('script'),
            var done = false;
            script.src = url;
            script.async = true;
    
            script.onload = script.onreadystatechange = function () {
                if (!done && (!this.readyState || this.readyState === "loaded" || this.readyState === "complete")) {
                    done = true;
                    script.onload = script.onreadystatechange = null;
                    if (script && script.parentNode) {
                        script.parentNode.removeChild(script);
                    }
                }
            };
            if (!head) {
                head = document.getElementsByTagName('head')![image](https://img.haomeiwen.com/i4369687/aa4772d80e4edcf6.gif?imageMogr2/auto-orient/strip)
    
    ;
            }
            head.appendChild(script);
        }
    
        function jsonp(url, params, error, callback) {
            query = "?";
            params = params || {};
            for (key in params) {
                if (params.hasOwnProperty(key)) {
                    query += encodeURIComponent(key) + "=" + encodeURIComponent(params[key]) + "&";
                }
            }
            var jsonp = "json" + (++counter);
            window[jsonp] = function (data) {
                callback(data);
                try {
                    delete window[jsonp];
                } catch (e) {}
                window[jsonp] = null;
            };
    
            load(url + query + "callback=" + jsonp);
    
            error = error ||
            function () {};
    
            window.setTimeout(function () {
                if (typeof window[jsonp] == "function") {
    
                    // replace success with null callback in case the request is just very latent.
                    window[jsonp] = function (data) {
                        try {
                            delete window[jsonp];
                        } catch (e) {}
                        window[jsonp] = null;
                    };
    
                    // call the error callback
                    error();
    
                    // set a longer timeout to safely clean up the unused callback.
                    window.setTimeout(function () {
                        if (typeof window[jsonp] == "function") {
                            try {
                                delete window[jsonp];
                            } catch (e) {}
                            window[jsonp] = null;
                        };
                    }, 120000);
                };
            }, 10000);
    
            return jsonp;
        }
        return {
            get: jsonp
        };
    }());
    
    /*
    Example:
    ----------------
    
    var url = 'http://blog.eood.cn/api';
    var error = function() {alert('error');};
    var success = function(data) {
            // process the data
    };
    JSONP.get( url, {'parm1': 'parm1_value', 'parm2': 'parm2_value'}, error, success);
    
    */
    

    相关文章

      网友评论

        本文标题:自己封装的JSONP请求,如何异常处理

        本文链接:https://www.haomeiwen.com/subject/xerzuhtx.html