谷歌地图API的Javascript应该是装载this way:
<script>
function initMap() {
console.log('loaded');
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
如果让我来回答我的问题,我会做它像这样:
var googleAPILoadedPromise = Promise.pending();
function initMap() {
googleAPILoadedPromise.resolve();
}
googleAPILoadedPromise.promise.then(function() {
console.log('loaded');
});
但deferreds已被取消,可能认为是一个反模式,至少在bluebird。有没有更好的办法?
关于第二个想法,我会做这样的:
<script>
var resolvePromise = null;
var promise = new Promise(function(resolve, reject) {
resolvePromise = resolve;
});
promise.then(function() {
console.log('loaded');
});
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=resolvePromise" async defer></script>
大概是这个样子:
<script>
var loadGoogleMaps = (function(root, d, x, cb){
var s = d.createElement(x)
var a = d.getElementsByTagName(x)[0]
var cleanup = function (done) {
return function (value) {
s.remove()
delete root[cb]
return done(value)
}
}
return new Promise(function (resolve, reject){
root[cb] = cleanup(resolve)
s.onerror = cleanup(reject)
s.async = true
s.src = 'https://maps.googleapis.com/maps/api/js?callback=' + cb
a.parentNode.insertBefore(s,a)
});
})(this, document, 'script', 'googleMapsCallback' + Date.now())
loadGoogleMaps.then(function(){
console.log('loaded')
})
</script>
打字稿解决方案。删除异步和推迟其等待直到JS负荷。
放入的index.html
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
让全球的功能,参考项目的任何地方。
export function initMap(callback): Promise<any> {
return new Promise(function(resolve, reject) {
// SEE IF IN WINDOW OBJECT
callback(resolve);
});
}
要引用全局文件,请按照以下。
import { initMap } from 'path to initMap';
initMap().then((res) => {
console.log('map: ' + res);
});