前端天气应用使用ES模块导入导出异步函数时触发Google API报错的问题

我之前也碰到过类似的坑，咱们来一步步捋清楚原因和解决办法：

首先问题的核心出在ES模块的作用域特性与脚本加载时机上：

• 不用模块的时候，传统脚本运行在全局作用域里，Google API异步加载后暴露的google对象直接挂在window上，你的代码能顺利访问到。而且虽然Google脚本用了async，但浏览器的执行顺序可能刚好让API在你的脚本运行前加载完成，所以没出问题。
• 改成type="module"后，模块有自己独立的作用域，而且模块脚本的执行逻辑和传统脚本不一样，很大概率是你的模块代码先跑了，但Google API还没加载完成，这时候调用相关方法自然就抛出InvalidValueError了。

给你几个具体的解决步骤：

1. 确保Google API加载完成后再执行模块代码 #

最稳妥的方式是监听Google脚本的加载完成事件，再动态加载你的模块：

<!-- 修改Google API的脚本标签，添加onload回调 -->
<script async src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&libraries=places" onload="initWeatherApp()"></script>

<!-- 加一个普通脚本定义初始化函数 -->
<script>
function initWeatherApp() {
  // 动态创建模块脚本并加载
  const moduleScript = document.createElement('script');
  moduleScript.type = 'module';
  moduleScript.src = './index.js';
  document.body.appendChild(moduleScript);
}
</script>

这样就能保证只有当Google API完全加载好、google对象可用时，你的模块代码才会执行。

2. 在模块里明确访问全局的Google对象 #

ES模块不会自动把全局变量注入到模块作用域，所以建议你在调用Google API的地方，明确用window.google来访问，避免作用域相关的问题：

// 比如在getCoordinates函数里
async function getCoordinates(region) {
  // 明确使用window.google
  const autocomplete = new window.google.maps.places.AutocompleteService();
  // 后续逻辑...
}

3. 检查模块导入导出的路径正确性 #

如果你把函数拆分到其他模块（比如utils.js），要确保导入时用正确的相对路径，比如：

// index.js里导入
import { getCoordinates, getWeatherData } from './utils.js';

路径错误可能导致模块加载失败，间接引发其他问题。

按照这几步调整后，应该就能解决模块模式下Google API报错的问题了。

备注：内容来源于stack exchange，提问作者Nick