调用OpenWeather API返回400 wrong latitude错误如何修复

调用OpenWeather接口返回{"cod":"400","message":"wrong latitude"}是因为经纬度参数传值非法：

• 你使用JS模板字符串拼接API地址时，没有用正确的插值语法，直接写了{lat}、{lon}，这两个内容会被当成普通字符串传递，不会替换成前面获取到的经纬度变量值，接口收到的纬度参数是字面量{lat}，不属于合法的纬度数值，直接触发参数校验报错。
• 原代码还存在三个隐性问题：一是只拼接了API字符串，没有实际发起接口请求；二是使用h1变量前没有做DOM获取，运行时会报变量未定义错误；三是没有处理用户拒绝定位权限的场景，交互存在缺口。

• 修正模板字符串插值格式，JS模板字符串中引用变量必须使用${变量名}的语法，才能正确把变量值插入到字符串中
• 清理API地址中的多余换行、首尾空格，避免参数拼接异常
• 补全接口请求逻辑，拼好合法地址后发起请求获取天气数据
• 补全DOM获取、定位权限拒绝的错误处理逻辑，避免运行时报错

window.addEventListener('load', ()=>{
    let lon;
    let lat;
    // 提前获取DOM元素，解决原代码h1未定义问题
    const h1 = document.querySelector('h1');

    if(navigator.geolocation){
        // 传入定位成功、失败两个回调
        navigator.geolocation.getCurrentPosition(async position => {
            lon = position.coords.longitude;
            lat = position.coords.latitude;

            // 修正插值语法，移除多余换行空格
            const api = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=432199bc4e2df182e56f173156ed4922`;
            
            // 发起接口请求
            try {
                const response = await fetch(api);
                const weatherInfo = await response.json();
                console.log('接口返回天气数据：', weatherInfo);
                // 此处补充天气数据渲染到页面的逻辑即可
            } catch (error) {
                h1.textContent = "天气信息获取失败，请稍后重试"
            }
        }, (error) => {
            // 处理用户拒绝定位、定位失败的场景
            h1.textContent = "定位失败，请开启定位权限后重试"
        });
        
    }else{
        h1.textContent = "当前浏览器不支持定位功能，无法使用天气服务"
    }
});

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