ES6 promise版的Jsonp封装

作者: 梦想成真213 | 来源:发表于2019-04-11 15:18 被阅读0次

ES6 promise版的Jsonp封装
Promise 封装 jsonp
jsonp封装（Promise）
jsonp的promise封装
微信小程序es6的class请求封装
IE浏览器error：Promise未定义
ES6 promise版的Ajax封装
结合Promise 封装JSONP方法
Promise的简单实现
ES6-Promise对象

前面一篇整理Promise的Ajax的封装，这次做一个JSONP的封装，现在前端工程化的普及，基本上都是前后端分离，会有跨域的问题，JSONP是一种解决方案，不过JSONP只能处理get类型的请求。它的原理就是通过动态加载一个script文件，文件内容是一个回调函数，参数就是接口返回的数据，执行这个回调函数就能拿到数据。
代码如下：

//Jsonp.js
(function(){
    //document.getElementsByTagName 返回一个HTMLCollection[head] [0]取得head元素
    //html5 新增head属性 document.head引用文档的<head>元素
    const head = document.head ? document.head : document.getElementsByTagName('head')[0]
    let id = new Date();
    const JsonpRequest = (options) => {
        return new Promise((resolve,reject) => {
            const script = document.createElement('script');
            let responseData;
            let callbackName = 'myJsonp' + (id++);
            const removeScript = (e) => {
                if(script.onload) script.onload = null;
                if(script.onerror) script.onerror = null;
                if(responseData){
                    resolve(responseData);
                } else{
                    reject(new Error('fail'));
                }
            }
            script.type = 'text/javascript';
            if(script.onload){
                script.onload = removeScript;
            }
            window[callbackName] = () => {
                responseData = arguments;
            }
            script.src = options.url + urlParams(options.params) + '&cb' + callbackName;
            head.appendChild(script);
        });
        
        window.JsonpRequest = window.JsonpRequest || JsonpRequest;       
    }
    const urlParams = (params) => {
        const result = [];
        for(let prop in params){
            result.push(`prop=${params[prop]}`);
        }
        return result.join('&');
    }
})();

调用

<script src="Jsonp.js"></script>
<script>
  JsonpRequest({
      url:'localhost:8080',
      params:{
         id:123,
         page:10
      } 
  })
.then((data) => {
  console.log(data)
},(e) => {
  console.log(e)
});
</script>