欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-06-04 14:44:46
...
手动实现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(`请求失败,请检查网络或请求地址是否正确`);
 })