实现jsonp原理

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)
  })
}

猜你喜欢

转载自www.cnblogs.com/wangyisu/p/12900714.html