承诺解决用作函数?

时间:2018-04-30 14:03:31

标签: javascript google-maps ecmascript-6 promise

我最近一直在使用Javascript中的Promise,但我很难理解这里到底发生了什么。

正在使用initMap的回调设置Google地图脚本网址。因此,当谷歌地图完成加载时,将触发此回调。

反过来调用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>

4 个答案:

答案 0 :(得分:2)

我能看到这种结构的唯一原因是你希望能够访问在加载谷歌地图api时解析的Promise。

  1. 创建新的承诺对象。
  2. 该承诺的解析函数被分配到窗口变量resolveFunc
  3. 的范围之外
  4. 为承诺解析后发出控制台日志的承诺分配.then
  5. 当外部gmaps脚本运行initMap函数时,将调用已分配的resolve函数。
  6. console.log内的.then会触发。
  7. 我看不出有任何需要,在没有promise构造的情况下在initMap中运行代码也可以实现。

答案 1 :(得分:0)

我以前从未见过这种结构。

我只能想到它的一个原因:允许某种模块化。加载Google地图网址会触发该承诺的解决。与此同时,其他模块可能已将.then附加到此承诺,以便在加载此脚本时运行。

这个全局promise变量真的很难看,但它可以用于此目的。

注意:我的意思是“模块”的一般含义:一些相当独立,有凝聚力的代码块。

答案 2 :(得分:0)

这种模式背后的想法是脚本,加载:

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

......,应该能够解决这个承诺。为此,脚本需要调用promise构造函数提供的resolve函数。但由于resolve是该构造函数的本地,因此作者使用了一个解决方案,他们将该函数分配给全局变量,可用于加载脚本。

该脚本肯定会查看url中存在的callback参数,并提取其后的值。它将被分配给某个变量,比方说callback,然后它们将触发解决方案:

window[callback]();

这将是resolveFunc的同义词,后者又是resolve的同义词。

通过调用resolve

,该脚本无法完成此操作
resolve();

......因为那将是一个未知的变量。

答案 3 :(得分:0)

这种方法称为延迟模式,特别是implemented in jQuery。它很容易antipattern,但在这里可能是合理的,因为这是从Google Maps API回调转换为承诺的合理方式。

promise解析延迟到调用resolveFunc回调。 promise是全局的,可以在应用程序中使用。如果没有使用它,由于上述原因,这可以被认为是反模式:

  

当你不真正理解承诺并将它们视为美化事件发射器或回调实用程序时,很容易陷入这种情况。

可能只是:

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