我最近一直在使用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>
答案 0 :(得分:2)
我能看到这种结构的唯一原因是你希望能够访问在加载谷歌地图api时解析的Promise。
resolveFunc
.then
。console.log
内的.then
会触发。我看不出有任何需要,在没有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>