前端企业面试题：企业真实案例——24

手动实现jsonp请求封装

let $ = {
    jsonp(url, options){
        //创建script标签
        let _script = document.createElement('script');
        //生成随机函数名
        let functionName = 'jsonpCBK_'+Math.round(Math.random()*10**6)+'_'+new Date().getTime()
        //处理拼接请求地址
        if(/\?/.test(url)) {
            url +=`&${options.cbk || 'callback' }=${functionName}`
        } else {
            url +=`?${options.cbk || 'callback' }=${functionName}`
        }        
        return new Promise(resolve=>{
            //添加全局回调函数
            window[functionName] = data=>{
                resolve(data); //改变Promise状态
                window[functionName] = undefined; //清理全局函数
                _script.remove(); //清理script标签
            }
            _script.src = url;
            _script.onerror = function(e){
	        reject(e);
            }				     
            document.body.appendChild(_script);
        });
    }
};

//测试代码1
$.jsonp("http://suggestion.baidu.com/su?wd=ab", {cbk:'cb'})
 .then(data=>{
     console.log(data);
 })

//测试代码2
$.jsonp("http://xxxxxxxxxxxxx",)
 .then(data=>{
     console.log(data);
 })
 .catch(e=>{
     console.error(`请求失败,请检查网络或请求地址是否正确`);
 })