首页 > Web开发 > 详细

实现jsonp原理

时间:2020-05-16 15:59:33      阅读:45      评论:0      收藏:0      [点我收藏+]
function jsonp (url,data) {
  return new Promise ((res,rej)=>{
    //处理传进来的地址
    let urlString = url.indexOf("?") ? "&" : "?";
    //定义回调方法名
    let callbackName = `jsonpCB_${Date.now()}`;
    
    url += `${urlString}callback=${callbackName}`;
    //处理data参数
    if(data) {
      for(let key in data){
        url += `&${key}=${data[key]}`
      }
    }
    //创建script标签
    let script = document.createElement("script")
    script.src = url;
    //函数挂在到全局
      window[callbackName] = result =>{
        delete window[callbackName]
        document.body.removeChild(script)
        if(result){
          res(result)
        }else{
          rej("数据为空")
        }
      }

    //监听script
    script.addEventListener(‘error‘,()=>{
      delete window[callbackName]
      document.body.removeChild(script)
      rej("资源加载失败")
    })

    //插入页面
    document.body.appendChild(script)
  })
}

 

实现jsonp原理

原文:https://www.cnblogs.com/wangyisu/p/12900714.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!