关于JavaScript中Promise的resolve函数赋值及Google Maps回调的疑问

嘿，我来帮你把这段代码的逻辑掰明白！你困惑的点其实是如何把外部异步回调和Promise的状态管理结合起来，咱们一步步拆解：

先回忆下Promise的基础 #

当你创建一个new Promise()时，会传入一个执行器函数（executor），这个函数会立即执行，并且自带两个参数：resolve和reject。这俩是Promise内部的函数——调用resolve()就会把Promise从「等待中（pending）」切换到「已完成（fulfilled）」状态，后续绑定的.then()回调就会触发；调用reject()则是切换到失败状态，触发.catch()。

回到你的Google Maps场景 #

加载Google Maps脚本是个异步操作：你把脚本插入页面，等它加载完成后，Google的代码会自动调用你指定的initMap回调函数。但你想用Promise来管理这个异步流程（这样就能用.then()或者async/await来写后续逻辑，比嵌套回调舒服多了），问题来了：initMap是在Promise外部被触发的，它没办法直接拿到Promise内部的resolve函数啊！

为什么要把resolve赋值给resolveFunc？ #

这就是关键所在：

• 先声明一个全局的resolveFunc变量（或者在合适的作用域里），初始值为null；
• 在Promise的执行器函数里，把Promise自带的resolve赋值给resolveFunc——相当于把Promise内部的「完成开关」拿到了外部；
• 当Google Maps加载完成，触发initMap时，调用resolveFunc()就等于按下了这个「完成开关」，Promise的状态立刻变成已完成，后续绑定的.then()就会开始执行。

简化版代码更直观 #

我把你的代码补全并简化，你一看就懂：

var resolveFunc = null;
// 创建Promise，拿到内部的resolve
var mapPromise = new Promise(function(resolve, reject) {
  resolveFunc = resolve;
  // 插入Google Maps脚本，指定initMap为回调
  const script = document.createElement('script');
  script.src = 'https://maps.googleapis.com/maps/api/js?callback=initMap';
  document.body.appendChild(script);
});

// 地图加载完成后，Google会调用这个函数
function initMap() {
  // 调用resolveFunc，就是告诉Promise：异步操作完成了！
  resolveFunc();
  // 这里可以写地图初始化的逻辑，比如创建地图实例
  const map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}

// 现在可以用Promise的方式处理后续逻辑
mapPromise.then(function() {
  console.log('地图加载搞定啦！可以做后续操作了～');
});

总结一下 #

这个操作的核心就是把Promise内部的resolve函数“暴露”到外部作用域，让原本独立的异步回调（initMap）能够通知Promise「异步任务完成」，从而把传统的回调式异步转换成Promise风格的异步，让代码更易读、更易维护，也能和其他异步逻辑（比如接口请求）无缝结合。

内容的提问来源于stack exchange，提问作者Stephan-v