@lyrion

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

Недавно прочитал главу 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):
5d673f7142454807371684.png

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

p.s. Я понимаю, что такой способ подключения скриптов не оптимален и лучше это делать через node. Но моя задача разобраться с Promise
  • Вопрос задан
  • 166 просмотров
Решения вопроса 1
Negezor
@Negezor
Senior Shaurma Developer
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
        });
    })
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы