getScript在前端中请求js文件和jsonp

栏目: Json · 发布时间: 3年前

导语: getScript在前端中使用的非常广泛,那么这里也分享下自己使用的ts版本的getScript,可以用来请求js文件和进行jsonp的请求

getScript在前端中使用的非常广泛,那么这里也分享下自己使用的ts版本的getScript:

/**
 * 加载js文件
 * @param {string} url 要加载的js文件链接
 * @param {function} callback 回调函数
 * @returns {Promise} 返回一个Promise对象,若加载失败或者超时,则reject
 */
const getScript = (url: string, callback: ()=>{}): Promise<null> => {
    const head = document.getElementsByTagName('head')[0];
    const script = document.createElement('script');
    const timeout: number = 5000; // 过期时间
    let timer: number;

    script.setAttribute('type', 'text/javascript');
    script.setAttribute('charset', 'UTF-8');
    script.setAttribute('src', url);
    if (sid) {
        script.setAttribute('id', sid);
    }

    const cleanup = () => {
        if (script.parentNode) {
            script.parentNode.removeChild(script);
        }
        if (timer) {
            clearTimeout(timer);
        }
    };
    head.appendChild(script);

    return new Promise((resolve, reject) => {
        // 执行回调
        const callbackFn = () => {
            if (timer) {
                clearTimeout(timer);
            }
            callback();
            resolve();
        };

        script.onload = () => {
            callbackFn();
        };

        if (timeout) {
            timer = setTimeout(() => {
                cleanup();
                reject(new Error(`get ${url} timeout`));
            }, timeout);
        }
    });
};

正常请求一个js文件,然后设置了一个5000ms的过期时间,若请求资源不成功,则进入到 reject 中。同时,getScript支持使用callback和Promise两种方式执行结果的回调,不过callback的方式无法获取到超时的情况:

getScript('http://mat1.gtimg.com/libs/jquery2/2.2.0/jquery.min.js').then((jQuery: any)=>{
    console.log(jQuery.fn.jquery);
}).catch(e=>console.error('请求超时'));

这种方式,其实稍微改造一下,也是可以直接用来跨域,请求支持jsonp接口的。在url的后面添加上callback的请求参数,然后在回调里执行这个callback。 例如:

const getScript = (url: string, data: {}): Promise<any> => {
    const head = document.getElementsByTagName('head')[0];
    const script = document.createElement('script');
    const timeout: number = 5000; // 过期时间
    let timer: number;
    let fecthCallBack: string = 'cb' + Date.now() + '_' + ('' + Math.random()).substr(-8);

    const cleanup = () => {
        if (script.parentNode) {
            script.parentNode.removeChild(script);
        }
        window[fecthCallBack] = () => {};
        delete window[fecthCallBack];
        if (timer) {
            clearTimeout(timer);
        }
    };
    head.appendChild(script);

    // 将Object类型的数据转换为URL链接需要的参数
    let paramObj = (params: any) => {
        let str = '',
            key,
            item;
        for (key in params) {
            if (typeof params[key] === 'object') {
                item = JSON.stringify(params[key]);
            } else {
                item = params[key];
            }
            str += `&${key}=${encodeURIComponent(item)}`;
        }
        return str.substring(1);
    };

    url += (~url.indexOf('?') ? '&' : '?') + paramObj(data) + '&callback=' + fecthCallBack;

    script.setAttribute('type', 'text/javascript');
    script.setAttribute('charset', 'UTF-8');
    script.setAttribute('src', url);

    return new Promise((resolve, reject) => {
        window[fecthCallBack] = (data: any) => {
            cleanup();
            resolve(data);
        };

        if (timeout) {
            timer = setTimeout(() => {
                cleanup();
                reject(new Error('Timeout'));
            }, timeout);
        }
    });
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

UNIX编程艺术

UNIX编程艺术

[美] Eric S. Raymond / 姜宏、何源、蔡晓骏 / 电子工业出版社 / 2012-8 / 99.00元

《UNIX编程艺术》主要介绍了Unix系统领域中的设计和开发哲学、思想文化体系、原则与经验,由公认的Unix编程大师、开源运动领袖人物之一Eric S.Raymond倾力多年写作而成。包括Unix设计者在内的多位领域专家也为《UNIX编程艺术》贡献了宝贵的内容。《UNIX编程艺术》内容涉及社群文化、软件开发设计与实现,覆盖面广、内容深邃,完全展现了作者极其深厚的经验积累和领域智慧。一起来看看 《UNIX编程艺术》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码