Как правильно работать с Promise?

Question

[GAS-ART]

Есть функция загрузки скрипта:

function loadScript(src) {
      return new Promise((resolve, reject) => {
         const script = document.createElement("script");
         script.src = src;
         script.onload = () => resolve(script);
         script.onerror = () => reject(new Error(`Script load error for ${src}`));
         document.head.appendChild(script);
      });
   }

Ну и собственно сама загрузка скриптов:

loadScript("https://learn.javascript.ru/article/promise-chaining/one.js")
  .then(script => loadScript("https://learn.javascript.ru/article/promise-chaining/two.js"))
  .then(script => loadScript("https://learn.javascript.ru/article/promise-chaining/three.js"))
  .then(script => {
    one();
    two();
    three();
  });

Я не могу до конца понять две вещи:
1) Вот это присваивание script.onload = () => resolve(script); почему присваивается через функцию? Мы же можем просто присвоить так: script.onload = resolve; и записать вызов функции таким образом:

loadScript("https://learn.javascript.ru/article/promise-chaining/one.js")
      .then( () => loadScript("https://learn.javascript.ru/article/promise-chaining/two.js"))
      .then( () => loadScript("https://learn.javascript.ru/article/promise-chaining/three.js"))
      .then( () => {one()})
      .then( () => {two()})
      .then( () => {three()});

Вопрос если разница в таких записях?

2) Если resolve это функция колбек то почему такой ее вызов дает ошибку script.onload = resolve(script);, а если запихнуть в функцию стрелку script.onload = () => resolve(script); то нормально работает?

Comments

[Ярослав Иванов]

then(script => loadScript("/article/promise-chaining/two.js"))
Для чего передаете script если его не используете?

[GAS-ART]

Это не рабочий проект, В качестве самообучения хочу разобраться в принципах работы промисов. Просто тестирую как они себя ведут и поведение их мне пока не до конца понятно.

[GrayHorse]

resolve — функция,
resolve(script) вызов функции,
() => resolve(script) — функция.

Answer 1

[Сергей Соколов]

Вопрос если разница в таких записях?

Только в передаваемом значении:

• resolve(script) передаст дальше по цепочке этот script (который никому не нужен, похоже).
  
• script.onload = resolve передаст по цепочке объект события (тоже всем по барабану)
  

почему такой ее вызов дает ошибку script.onload = resolve(script);

потому, что нужна функция, которую вызовут позже, а не мгновенный результат её выполнения.

Answer 2

[Alexandroppolus]

можно грузить параллельно, если они не зависят друг от друга и последовательность загрузки не важна

await Promise.all([
    'https://learn.javascript.ru/article/promise-chaining/one.js',
    'https://learn.javascript.ru/article/promise-chaining/two.js',
    'https://learn.javascript.ru/article/promise-chaining/three.js',
].map(loadScript));

one();
two();
three();

Answer 3

[Надим]

А теперь оцени как все это проще делается с использованием async / await:

await $.getScript('https://learn.javascript.ru/article/promise-chaining/one.js');
await $.getScript('https://learn.javascript.ru/article/promise-chaining/two.js');
await $.getScript('https://learn.javascript.ru/article/promise-chaining/three.js');

Вместо $.getScript можешь loadScript использовать, результат будет такой же - последовательная загрузка.

Comments

[Сергей Соколов]

только это еще надо обернуть в async function, и вызвать ее. Или поместить в модуль.

[Надим]

Сергей Соколов, это да, но если в консоли запускать, то и так прокатит.