如何让API URL接收动态参数，实现天气APP用户输入城市功能？

你的问题核心在于全局变量apiTagUrl初始化过早，它在city还未被赋值（甚至未定义）时就尝试拼接URL，同时getWeatherInfo函数没有接收动态的city参数，无法实现按需传入城市值。

具体修正步骤： #

• 把URL的构建逻辑移到getWeatherInfo函数内部，让它在函数调用时才根据传入的city生成，避免提前依赖未定义的变量。
• 给getWeatherInfo添加city参数，让它能接收动态的城市值。
• 确保apiTag（你的OpenWeatherMap密钥）是已正确定义的变量。

修正后的代码： #

// 确保apiTag已正确定义
const apiTag = "你的API密钥";

async function getWeatherInfo(city) {
  // 每次调用函数时，根据传入的city构建URL
  const apiTagUrl = new URL(`https://api.openweathermap.org/data/2.5/weather?q=${city},USA&units=imperial&appid=${apiTag}`);
  const response = await fetch(apiTagUrl);
  const data = await response.json();
  console.log(data);
};

// 调用时传入用户输入的城市，比如从输入框获取
const userInputCity = document.querySelector("#city-input").value;
getWeatherInfo(userInputCity);

额外说明： #

• 如果你需要处理用户输入的合法性（比如空值、非有效城市），可以在调用函数前添加校验逻辑，避免无效的API请求。
• 错误提示里的"city无法在初始化前被访问"，就是因为全局的apiTagUrl在city存在之前就被创建了，把URL构建移到函数内部就能彻底解决这个时序问题。

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