如何使用js 检测远程的js文件是否存在？

Question

项目使用的是angularJS 需要开发一个打印的功能，该功能需要在本机安装了一个程序有两个本地的js文件可供访问

var src1 = 'http://localhost:8000/CLodopfuncs.js?priority=1';
var src2 = 'http://localhost:18000/CLodopfuncs.js?priority=0';

问题是并不是所有的业务都需要打印，不会都安装打印插件，那加载两个js就会报错，如何检测这两个js是否存在，不存在就不加载？

另外我是全局加了一个js文件，这个文件会将上面的两个js文件注入到dom的head中，但我只想在我需要的页面才注入，又要保证页面加载好执行逻辑的时候这两个文件已经载入了。

Answer 1

目前我在获取js时，是创建一个script标签，然后插入到head里，然后再给一个过期时间，过期后还没拿到这个js，则说明js不存在；

const getScript = (url, sid) => {
    const head = document.getElementsByTagName('head')[0];
    const script = document.createElement('script');
    const timeout = 5000; // 过期时间
    let timer;

    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); }
            resolve();
        };

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

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

getScript('http://localhost:8000/CLodopfuncs.js?priority=1')
    .then(()=>{
    
    })
    .catch(err=>{
        console.log(err, 'js isn\'t exsit');
    })

Answer 2

注入到dom的head中 可以监测onload onerror事件吧

Answer 3

XmlHttpRequest 获取内容，然后写入 dom
XmlHttpRequest 文件不存在的时候，处理一下报错就行

Answer 4

(async function(){
try{
    var src1 = 'http://localhost:8000/CLodopfuncs.js?priority=1';
    var src2 = 'http://localhost:18000/CLodopfuncs.js?priority=0';
    await Promise.all(import(src1),import(src2));
    console.log('success');
}catch(e){
    console.log('error');
}
})()

对浏览器有要求