如何修改全局变量？异步操作下lon、lat赋值不生效问题

你的问题出在异步操作的执行顺序上：fetch 是异步网络请求，当你点击按钮调用 GeoGet() 后，代码不会等待请求完成，就直接执行了后面的 console.log(lon)，这时候 lon 和 lat 还没被赋值，所以打印的是初始的 undefined；而 then 回调里的 console.log 是等请求成功返回数据后才执行的，所以你会先看到两个 undefined，之后才看到正确的经纬度值。

解决方法一：把后续操作放到 then 回调里 #

直接在获取到经纬度的回调里执行需要用到 lon 和 lat 的逻辑：

const searchbtn = document.getElementById('Search-btn');
const cityinput = document.getElementById('city-input');
const apiKey = 'key';
let lon;
let lat;

function GeoGet() {
    let GeoApiUrl = `http://api.openweathermap.org/geo/1.0/direct?q=${cityinput.value}&limit=1&appid=${apiKey}`
    fetch(GeoApiUrl)
        .then(response => response.json())
        .then(data => {
           lon = data[0].lon;
            lat = data[0].lat;
            console.log(lon);
            console.log(lat);
            // 这里放需要用到 lon、lat 的后续代码
            console.log('外部逻辑使用的lon:', lon);
        })
        .catch(error => {
            console.error(error); // 传入错误参数，方便排查问题
        });
}
searchbtn.onclick = () => {
    GeoGet();
}

解决方法二：使用 async/await 让异步代码同步化 #

用 async 标记函数，await 等待请求完成，这样代码执行顺序会符合你的预期：

const searchbtn = document.getElementById('Search-btn');
const cityinput = document.getElementById('city-input');
const apiKey = 'key';
let lon;
let lat;

async function GeoGet() {
    try {
        let GeoApiUrl = `http://api.openweathermap.org/geo/1.0/direct?q=${cityinput.value}&limit=1&appid=${apiKey}`
        const response = await fetch(GeoApiUrl);
        const data = await response.json();
        lon = data[0].lon;
        lat = data[0].lat;
        console.log(lon);
        console.log(lat);
    } catch (error) {
        console.error(error);
    }
}
searchbtn.onclick = async () => {
    await GeoGet();
    console.log(lon);
    console.log(lat);
}

另外注意你原代码的 catch 里没有传入错误参数，这样出问题时看不到具体错误信息，建议补上。

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