Как подключить скрипты через Promise?

Question

[lyrion]

Недавно прочитал главу Promise и решил подключить скрипты через них, но почему-то ничего не получается.
Подключаю:
- jquery
- bootstrap
- svg-pan-zoom
Два последних используют jquery.
Мой код:

//Указываем путь к файлам
let aSrcPath = ['../node_modules/jquery/dist/jquery.min.js',
								'../node_modules/bootstrap/dist/js/bootstrap.min.js',
								'../node_modules/svg-pan-zoom/dist/svg-pan-zoom.min.js'
								];
//Формируем массив промисов								
let req = aSrcPath.map( url => {
	return new Promise(function(resolve, reject) {
    let script = document.createElement('script');
    script.src = url;

    script.onload = () => resolve(script);
    script.onerror = () => reject(new Error(`Ошибка загрузки скрипта ${src}`));

    document.head.append(script);
  });
});

Дальше я пробую подключить их в цепочку:

req[0].then((res) => {console.log('Загружен: ' + res.src);
											return req[1];											
											})
			.then((res) => {console.log('Загружен: ' + res.src); 
											return req[2];
											})
			.then((res) => {
				console.log('Загружен: ' + res.src); 
				 //Пытаемся отрисовать карту через svgPanZoom
				svgPanZoom('#wsr_map', {
					zoomEnabled: true,
					controlIconsEnabled: true,
					fit: true,
					center: true
				});
});

И ловлю ошибки (как я понял вызванные неподключением jquery):


Причем периодически, при перезагрузке страницы, один из скриптов, либо bootstrap, либо svg-pan запускается, но оба никогда)
Объясните пожалуйста в чем дело.

p.s. Я понимаю, что такой способ подключения скриптов не оптимален и лучше это делать через node. Но моя задача разобраться с Promise

Answer 1

[Владлен Хеллсайт]

Bootstrap.js зависит от jQuery (если не 4 версия), он может зарезолвится раньше.

const loadScript = (url) => (
    new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = url;
    
        script.onload = () => resolve(script);
        script.onerror = () => reject(new Error(`Ошибка загрузки скрипта ${src}`));
    
        document.head.append(script);
    })
);


loadScript('../node_modules/jquery/dist/jquery.min.js')
    .then(() => {
        // Теперь когда jQuery подключен, можно подключить сам Bootstrap.js и svg-pan-zoom 
        // Можно паралельно грузить, так как они не зависят друг от друга
        return Promise.all([
            loadScript('../node_modules/bootstrap/dist/js/bootstrap.min.js'),
            loadScript('../node_modules/svg-pan-zoom/dist/svg-pan-zoom.min.js')
        ]);
    })
    .then(() => {
        console.log('Все скрипты загружены');

        svgPanZoom('#wsr_map', {
            zoomEnabled: true,
            controlIconsEnabled: true,
            fit: true,
            center: true
        });
    })

Comments

[lyrion]

Да, так все работает. Т.е. я правильно понимаю? - у меня скрипты подключались еще на этапе
let req = aSrcPath.map( url => { .... }
А не в части
req[0].then((res) => { .... }
И при задании req bootstrap грузился быстрее jquery?

[Владлен Хеллсайт]

lyrion, да. Promise начинает выполнение сразу как только его вызвали, а не ожидает пока что-то будет ждать. В итоге у вас получилась асинхронная гонка.

[lyrion]

Спасибо за подробный ответ, теперь разобрался)