Обещание решимости используется как функция?

Question

В последнее время я работаю с Обещаниями в Javascript, но мне трудно понять, что именно здесь происходит.

URL-адрес скрипта Google Maps устанавливается с обратным вызовом initMap. Поэтому, когда Google Maps завершит загрузку, этот обратный вызов сработает.

В свою очередь это вызывает resolveFunc(). resolvefunc() установлено в обещании, но я не получаю эту часть:

resolveFunc = resolve;

Какая польза от установки его равным функции разрешения?

<script>
  var resolveFunc = null;
  var promise = new Promise(function(resolve, reject) {
    resolveFunc = resolve;
  });
  promise.then(function() {
    console.log('loaded');
  });
  function initMap() {
    resolveFunc();
  }
</script>

<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>

Answer 1

Этот подход известен как отложенный шаблон, который был реализован в jQuery . Это может быть antipattern , но, возможно, здесь это оправдано, потому что это разумный способ перейти от обратного вызова API Карт Google к обещанию.

Разрешение

promise откладывается до вызова обратного вызова resolveFunc. promise является глобальным и может использоваться внутри приложения. Если он не используется, это можно считать антипаттерном по причинам, указанным выше:

Легко впасть в это, когда вы действительно не понимаете обещания и думаете о них как о прославленных источниках событий или утилите обратного вызова.

Это может быть просто:

<script>
  function initMap() {
    console.log('loaded');
  }
</script>

Answer 2

Я никогда раньше не видел эту конструкцию.

Я могу думать только об одной причине: разрешить какую-то модуляризацию. Загрузка URL Карт Google приведет к разрешению этого обещания. В то же время другие модули могли присоединиться к этому обещанию с помощью .then, которое будет запускаться после загрузки этого сценария.

Эта глобальная promise переменная действительно ужасна, но она подойдет для этой цели.

Примечание : я имею в виду «модуль» в его общем смысле: некоторый достаточно независимый, связный кусок кода.

Answer 3

Идея этого шаблона в том, что скрипт, который загружается с:

src="https://maps.googleapis.com/maps/api/js?callback=initMap"

..., должен быть в состоянии выполнить обещание. Для этого сценарию необходимо вызвать функцию resolve, которую предоставляет конструктор обещаний. Но поскольку resolve является локальным для этого конструктора, авторы использовали решение, в котором они присваивают эту функцию переменной global , которая будет доступна для загруженного скрипта.

Этот скрипт непременно рассмотрит аргумент callback, присутствующий в URL, и извлечет значение, следующее за ним. Он будет присвоен некоторой переменной, скажем, callback, и затем они вызовут разрешение с помощью:

window[callback]();

, который будет синонимом для resolveFunc, который, в свою очередь, является синонимом для resolve.

Этот скрипт не мог этого сделать с помощью вызова resolve:

resolve();

... так как это будет неизвестная переменная.

Answer 4

Единственная причина, по которой я вижу эту конструкцию, заключается в том, что вы хотите иметь доступ к Promise, который разрешается при загрузке API карт Google.

1. Создан новый объект обещания.
2. Функция разрешения этого обещания присваивается вне области окна переменной resolveFunc
3. A .then назначается обещанию, которое выдает консольный журнал при разрешении обещания.
4. Назначенная функция разрешения вызывается, когда функция initMap запускается внешним сценарием gmaps.
5. console.log внутри .then сработает.

Я не вижу в этом необходимости, чтобы можно было запустить код внутри initMap без конструкции обещания.