结合Promise 封装JSONP方法

jsonp

jsonp是一种前端开发中跨域的解决方案。利用了script 标签可以跨域请求的特性。
实现步骤：

• 1.创建script标签
• 2：注册返回的回调函数
• 3：script 的src属性赋值（请求地址+请求参数+回调函数）。
• 4 ：将script标签添加到document.body上
• 5：接收服务返回结果，移除回调函数和script标签。
  缺陷
• 1：仅支持get请求。
• 2：需要服务端的支持定义回调方法。

/**
  * 
  * @param {*} param0 
  */
function jsop({url,params={},callback,timeout=5000}){
        
       return new Promise((resolve,reject)=>{
         //创建标签
         let script=document.createElement('script');
         //回调的函数名(加上时间戳有效里面重复)
          const fnName=`jsonp_${new Date().getTime()}`;
          let paramsArr=[];
          //遍历参数 的key-value
          Object.keys(params).forEach(key=>{
                 paramsArr.push(`${key}=${params[key]}`)
          })
  
          paramsArr.push(`callback=${fnName}`);
          url+=`?${paramsArr.join('&')}`;
          console.log(url);
          //配置超时
          let timer= setTimeout(()=>{
              reject({error:'-1',msg:'请求超时'});
          },timeout);
          //回调函数
          window[fnName]=function(res){
            //删除标签
            delete script;
            delete window[fnName];
            //清除计时器
            clearTimeout(timer);
            delete script;
            delete window[fnName];
            //返回结果
            resolve(res);
         
          };
          script.src=url;
          document.body.appendChild(script);

       })
      
  
}
/**
 * 测试
 */
jsop({
    url:'https://api.asilu.com/weather/',
    params:{a:"1"},
    timeout:3000
}).then(res=>{
  console.log(res)

},error=>{
     console.log(error)
})