通过jsonp解决跨域的源码实现及其特点

/*
* 实现对 Jsonp 的封装
* url:请求地址
* params:传递的参数对象
* jsonp:与服务端协商的用于存放函数名字的参数
* */
export default function jsonp({url = "", params = {}, jsonp = "cb"}) {
    return new Promise((resolve, reject) => {
        // 定义 body 用于接收数据
        let  body = null;
        // 自定义函数的名字
        const cbName = "_jsonp" + Math.random().toString(36).substr(2);
        // 将jsonp放入params
        params[jsonp] =  cbName;
        // 自定义函数，用于接收值
        window[cbName] = function (data) {
            body = data;
        }
        function _handler({type}){
            // 删除script标签
            document.body.removeChild(script);
            // 删除自定义的函数
            delete window[cbName];
            // 加载完毕并得到数据执行resolve
            console.log(1111,body)
            if(type === "load" && !body)  resolve(body);
            // 异常执行 reject
            else if(type === "error") reject("加载失败");
        }
        // 将对象转为urlencoded格式
        const urlencoded = Object.keys(params).map(v => v + "=" + params[v]).join("&");
        // 将地址url与参数进行拼接。
        url += (url.includes("?") ? "&" : "?") + urlencoded;
        // 创建 script 标签
        const script = document.createElement("script");
        script.src = url;
        // 加载完毕
        script.onload = _handler;
        // 加载异常
        script.onerror = _handler;
        // 指定类型
        script.type = 'text/javascript';
        // 脚本可用，异步执行
        script.async = true;
        // 创建好的script放入body.
        document.body.appendChild(script);
    })
}

<script type="module">
    import jsonp from "./jsonp.js";
    // https://www.baidu.com/sugrec?prod=pc&wd=web前端&cb=cb
    (async () => {
        try {
            const res = await jsonp({
                url: "https://www.baidu.com/sugrec",
                params: {
                    prod: "pc",
                    wd: "web前端",// 指定关键字
                },
                jsonp: "cb"
            });
            console.log(res);
        } catch (err) {
            console.log(e)
        }
    })();
</script>