如何将Google Geocoder异步函数返回值赋值给全局变量

问题根因 #

你遇到的是异步代码执行时序问题：getGeocode是异步接口请求，你在then回调里能打印到正确值，说明赋值到全局变量的操作本身是成功的。你在其他代码里读不到新值，是因为读取操作发生在接口请求返回、then回调执行之前，此时全局变量还没被更新，仍然是初始的0值，不是存不进去，是读早了。

解决方案 #

根据你的场景（Next.js站点，最终要渲染到地图），推荐以下两种实现方式：

方案1：异步逻辑封装，保证依赖坐标的逻辑在赋值完成后执行

把所有需要用到经纬度的代码，都放到异步请求完成的节点再触发，避免提前读取：

// 全局变量
let latitude = 0;
let longitude = 0;

// 封装异步请求逻辑
async function loadCoordinates() {
  try {
    const response = await getGeocode(
      location[0].address,
      process.env.NEXT_PUBLIC_API_KEY
    );
    // 赋值全局变量
    latitude = response.data.results[0].geometry.location.lat;
    longitude = response.data.results[0].geometry.location.lng;
    // 赋值完成后，调用地图渲染逻辑
    renderMap(latitude, longitude);
  } catch (error) {
    console.error("坐标获取失败：", error);
  }
}

// 你的地图渲染逻辑，只有等坐标拿到后才会执行
function renderMap(lat, lng) {
  // 此处写入你在地图上展示位置的业务代码
  console.log("渲染地图使用坐标：", lat, lng);
}

// 触发请求
loadCoordinates();

方案2：Next.js/React场景下推荐用状态管理替代全局变量

全局变量的变更不会触发React组件重渲染，即使你赋值成功，地图组件也不会自动更新。用React状态存储坐标更符合框架规范：

import { useState, useEffect } from 'react';

// 你的地图页面组件
export default function MapPage() {
  // 用state存储坐标，变更会自动触发组件重渲染
  const [coordinates, setCoordinates] = useState({
    lat: null,
    lng: null
  });

  useEffect(() => {
    // 页面加载时请求坐标
    const fetchGeocode = async () => {
      try {
        const response = await getGeocode(
          location[0].address,
          process.env.NEXT_PUBLIC_API_KEY
        );
        const { lat, lng } = response.data.results[0].geometry.location;
        setCoordinates({ lat, lng });
      } catch (err) {
        console.error(err);
      }
    };
    fetchGeocode();
  }, []);

  return (
    <div>
      {/* 坐标加载完成后再渲染地图组件 */}
      {coordinates.lat && coordinates.lng && (
        <YourMapComponent 
          latitude={coordinates.lat} 
          longitude={coordinates.lng} 
        />
      )}
    </div>
  );
}

额外注意 #

如果必须使用全局变量，你可以新增一个加载完成标记位，其他逻辑读取前先判断状态，避免读到未赋值的初始值：

let isCoordsLoaded = false;
// then回调赋值完成后设置标记为true
isCoordsLoaded = true;

// 其他逻辑使用前先判断
if (isCoordsLoaded) {
  // 执行业务逻辑
}

内容的提问来源于stack exchange，提问作者Siddu Palaparthi