自定义jsonp请求数据

整理代码的时候发现一个以前写的实现jsonp请求方法，放在这里分享一下~

原理：通过js新建script dom对象，利用src携带参数和callback方法，将数据发送至后端，需要后端配合将数据放在callback中返回

功能：可以同时进行多个jsonp请求，且可以设置超时时间

注意：为了保证可以同时进行多个jsonp请求，所以每次请求需要新增script dom对象，请求结束后需要进行销毁

    var jsonpId = 0;  // 用来标记创建的<script>元素
    var debug = true;   // 是否开启debug
    function addScriptTag(src) {
      var script = document.createElement('script');
      script.setAttribute('type', 'text/javascript');
      script.setAttribute('src',src);
      script.setAttribute('onload','try {document.body.removeChild(this);} catch (e) { debug ? console.error(e) : ""; }'); // 用完就删
      document.body.appendChild(script);
      return script;
    }

    /*
     * jsonp 获取数据 跨域
     * paramObj {
     *   url: 请求的接口
     *   timeout: 请求过期时间（设置为0或者不设置这个参数，表示不设置过期时间，默认为0）
     *   data: 要发送的数据
     *   ready: 请求成功后调用的方法
     *   error: 请求失败后调用的方法（如：超时）
     * }
     * */
    function jsonpData(paramObj) {
      var url = paramObj.url + ((paramObj.url.indexOf('?') > -1) ? '&' : '?') + formatParams(paramObj.data);
      // 请求数据
      var mark = jsonpId++;
      window.jsonpCallback ? true : window.jsonpCallback = {};
      window.jsonpCallback[mark] = function (data) { // 针对每一个jsonp请求，生成一个对应的callback方法
        clearTimeout(window.timer[mark]);  // 清除掉对应的定时器

        paramObj.ready ? paramObj.ready(data) : '';

        try { // 删除回调方法
          delete window.jsonpCallback[mark];
        } catch (e) {
          window.jsonpCallback[mark] = null;
        }
      };
      var script = addScriptTag(url + "&callback=jsonpCallback[" + mark + "]");

      // 请求超时处理
      var timeout = paramObj.timeout ? paramObj.timeout : 0;
      window.timer ? true : window.timer = {};
      if(timeout) {
        window.timer[mark] = setTimeout(function () {
          if(window.jsonpCallback[mark]) {  // 移除对应的script dom，解决当数据超过设置的超时时间后返回了数据，但callback却不存在的情况
            try {
              document.body.removeChild(script);
            } catch (e) {
              debug ? console.error(e) : '';
            }

            window.jsonpCallback[mark] = function () {  // 重新定义一下回调方法, 改写 callback
              try {
                delete window.jsonpCallback[mark];
              } catch (e) {
                window.jsonpCallback[mark] = null;
              }
            };
            paramObj.error ? paramObj.error('请求超时，请检查网络环境！') : '';  // 超时执行 error

            // 设置一个足够长的计时器，将上面的回调方法彻底删除，如果没有走超时处理的方法，这个计时器也就不会存在
            var longTimer = setTimeout(function () {
              if(window.jsonpCallback[mark]) {   // 如果回调方法存在，彻底删除
                try {
                  delete window.jsonpCallback[mark];
                  clearTimeout(longTimer);
                } catch (e) {
                  window.jsonpCallback[mark] = null;
                }
              }
            }, 120000);
          }
          clearTimeout(window.timer[mark]);  // 清除掉对应的定时器
        }, timeout);
      }
    }

本文链接：https://www.cnblogs.com/xsilence/p/10794840.html