实现一个异步加载远端js的方法loadScript

最新推荐文章于 2024-11-11 20:00:00 发布

原创最新推荐文章于 2024-11-11 20:00:00 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #js

本文介绍了一个使用Promise实现的加载外部JS文件的方法。此方法通过传入URL加载远程JS资源，加载成功返回fulfilled promise，失败或5秒内未完成则返回rejected promise。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

该方法接收一个标识远端js地址的url参数，加载成功后方法返回一个fulfilled promise，且远端js能够执行；加载失败或者超时5s则返回rejected promise

/**
     * 加载外部的js文件
     * @param url 要加载的js的url地址
     * 
     */
function loadScript(url) {
    return new Promise( (resolve, reject) => {
        let _script = document.createElement('script')
        _script.setAttribute('charset', 'utf-8')
        _script.setAttribute('type', 'text/javascript')
        _script.setAttribute('src', url)
        document.getElementsByTagName('head')[0].appendChild(_script)

        timeout = setTimeout(() => {
            reject('timeout') //rejected
        }, 5000)

        _script.onload = () => { //加载完成
            clearTimeout(timeout)
            resolve() //fulfilled
        }
        _script.onerror = () => { //加载失败
            reject('fail') //rejected
        }
    })
}