———————————-(VUE肆1)————————————-

JSONP封装=>day8_9

一、JSONP

1.jsonp概念与封装注意点:

代价:需要前后端联动
精髓:自动的由插件生成方法名,并在当前的页面动态的生成函数
然后再生成的函数里头调用用户预留的回调函数
插件：自动化的去模拟基于script去实现跨域请求的过程（对用户来说是黑盒子）
参数拼接：url已经是带参的。和不带参的
id优化 额可以添加一个容器来管理id

2.自己封装的jsonp

2.1)js代码
  1. <script>
  2.     /**
  3.      * 1.声明一个jsonP插件对象
  4.      * 作用：隔开作用域
  5.      */
  6.     let jsonP = {};
  8.     /**
  9.      *2.在插件对象中创建两个名字备用符数组
  10.      */
  11.     jsonP.char = {
  12.         Number: '0123456789',
  13.         Letter: 'qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM'
  14.     }
  15.     /**
  16.      * 通过随机数抽取备用字符数组库拼凑函数id
  17.      * @param charLen
  18.      * @param numLen
  19.      */
  20.     jsonP.newFunId = function (charLen, numLen) {
  21.         let id = '';
  22.         for (let i = 0; i < charLen; i++) {
  23.             id += this.char.Letter.charAt(Math.random() * 52)
  24.         }
  25.         for (let j = 0; j < numLen; j++) {
  26.             id += Math.floor(Math.random() * 10);
  27.         }
  28.         return id;
  29.     }
  30.     /**
  31.      * 拼接路径
  32.      * @param url
  33.      * @param key
  34.      * @param value
  35.      */
  36.     jsonP.jointUrl = function (url, key, value) {
  37.         if (url && key && value) {
  38.             let sign = "&"
  39.             //如果是第一次
  40.             if (url.indexOf('?') == -1) {
  41.                 sign = '?'
  42.             }
  44.             url += sign + key + "=" + value
  45.         }
  46.         return url;
  47.     }
  48.     /**
  49.      封装err属性方便
  50.      */
  51.     jsonP.err = function (msg) {
  52.         console.error(msg)
  53.     }
  55.     /**
  56.      * 发送请求函数
  57.      * @param options
  58.      */
  59.     jsonP.req = function (options) {
  60.         let jsonId={};
  61.         //1.生成方法名
  62.         jsonId.funId = this.newFunId(4,8);
  63.         let Userurl = options.url;
  64.         let Userdata = options.data;
  65.         if (!options) {
  66.             this.err("输入不能空")
  67.             return;
  68.         } else if (!Userurl) {
  69.             this.err("url不能空")
  70.             return;
  71.         } else if (!Userdata) {
  72.             //如果没有data,初始化
  73.             Userdata = {};
  74.         }
  75.         //将函数名赋值给userdata的回调函数属性中
  76.         Userdata.callback = jsonId.funId;
  77.         for (let key in Userdata) {
  78.             Userurl = this.jointUrl(Userurl, key, Userdata[key])
  79.         }
  80.         let script = document.createElement('script');
  81.         script.setAttribute("id" , jsonId.funId);
  82.         script.setAttribute("src" , Userurl);
  83.         //动态生成函数
  84.         let callback=function (result) {
  85.             console.log("xxxxxxx")
  86.             //业务逻辑回调
  87.             if (options.callback){
  88.                 try {
  89.                     options.callback(result)
  90.                 }catch (e) {
  91.                     this.err(e.message)
  92.                 }
  93.             }
  94.             //善后
  95.             let tmp=document.getElementById(jsonId.funId)
  96.             tmp.parentNode.removeChild(tmp);
  97.             eval(jsonId.funId+'=null')
  98.         }
  99.         eval("window."+jsonId.funId+"=function(result){ callback(result) }")
  100.         document.head.appendChild(script)
  102.     }
  103.         //测试调用函数
  104.     let test=function () {
  105.         jsonP.req({
  106.             url:"http://localhost:3000/jsonpx",
  107.             data:{
  108.                 a:"111"
  109.             },
  110.             callback:function (result) {
  111.                 alert("成功"+result)
  112.             }
  113.         })
  114.     }
  115. </script>

2.2)服务端测试代码
  1. router.get('/jsonpx', async function (req, resp, next) {
  2.     let callback=req.query.callback;
  3.     let data=req.query.a;
  4.     if (!data){
  5.         resp.send(`${callback}('洪吉林:我是服务端代码')`)
  6.     }
  7.     resp.send(`${callback}('洪吉林:我是服务端代码`+data+`')`)
  8. })