解决OpenWeather API 400错误：动态构建API请求与最佳实践

// ... (其他常量定义)
const API_KEY = '<YOUR_API_KEY>'; // 请替换为您的OpenWeather API密钥

async function getWeather() {
  // 确保在每次调用时获取最新的搜索框值
  const searchbar = document.querySelector('#search-bar'); 
  const city = searchbar.value;

  // 动态构建API URL
  const apiURL = new URL("https://api.openweathermap.org/data/2.5/weather");
  apiURL.searchParams.set("q", city); // 设置城市查询参数
  apiURL.searchParams.set("units", "metric"); // 设置单位为摄氏度
  apiURL.searchParams.set("appid", API_KEY); // 设置API密钥

  try {
    const response = await fetch(apiURL.toString()); // 将URL对象转换为字符串进行fetch

    // 检查HTTP响应状态码
    if (!response.ok) {
      // 如果响应状态码不是2xx，抛出错误
      const errorData = await response.json();
      throw new Error(`HTTP error! Status: ${response.status}, Message: ${errorData.message || 'Unknown error'}`);
    }

    const data = await response.json();
    console.log(data);
    // 在此处更新UI，例如显示温度、描述和天气图片
    // temperature.textContent = `${data.main.temp}°C`;
    // description.textContent = data.weather[0].description;
    // imageContainer.innerHTML = `<img src="http://openweathermap.org/img/wn/${data.weather[0].icon}.png" alt="Weather icon">`;

  } catch (error) {
    console.error("获取天气数据失败:", error);
    // 在此处处理错误，例如向用户显示错误消息
    // temperature.textContent = "无法获取天气数据";
    // description.textContent = "";
    // imageContainer.innerHTML = "";
  }
}

document.querySelector('form').addEventListener('submit', (e) => {
  e.preventDefault(); // 阻止表单的默认提交行为，避免页面刷新
  getWeather();     // 调用异步函数来获取天气数据
});

const searchbar = document.querySelector('#search-bar');
const temperature = document.querySelector('.temperature'); // 假设页面中有这些元素
const description = document.querySelector('.description'); // 用于显示天气信息
const imageContainer = document.querySelector('.image-container'); // 用于显示天气图标

const API_KEY = '<YOUR_API_KEY>'; // 替换为您的OpenWeather API密钥

document.querySelector('form').addEventListener('submit', (e) => {
  e.preventDefault(); // 阻止表单默认提交行为
  getWeather();       // 调用函数获取天气数据
});

async function getWeather() {
  const city = searchbar.value; // 获取当前搜索框的值

  // 检查城市输入是否为空
  if (!city) {
    console.warn("请输入城市名称。");
    // 可以向用户显示提示信息
    // temperature.textContent = "请输入城市名称";
    return;
  }

  // 动态构建API URL
  const apiURL = new URL("https://api.openweathermap.org/data/2.5/weather");
  apiURL.searchParams.set("q", city);
  apiURL.searchParams.set("units", "metric"); // 例如，使用摄氏度
  apiURL.searchParams.set("appid", API_KEY);

  try {
    const response = await fetch(apiURL.toString()); // 发送HTTP请求

    if (!response.ok) {
      // 处理非2xx状态码的响应
      const errorData = await response.json();
      console.error(`API请求失败: ${response.status} - ${errorData.message || '未知错误'}`);
      // 更新UI显示错误信息
      // temperature.textContent = `错误: ${errorData.message || '无法获取数据'}`;
      // description.textContent = '';
      // imageContainer.innerHTML = '';
      return;
    }

    const data = await response.json(); // 解析JSON数据
    console.log(data);

    // 在此处更新UI以显示获取到的天气数据
    if (data && data.main && data.weather && data.weather.length > 0) {
      // temperature.textContent = `${Math.round(data.main.temp)}°C`;
      // description.textContent = data.weather[0].description;
      // imageContainer.innerHTML = `<img src="http://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png" alt="${data.weather[0].description}">`;
    } else {
      console.warn("API返回数据格式不正确或缺少关键信息。");
      // temperature.textContent = "数据异常";
    }

  } catch (error) {
    console.error("网络请求或数据处理过程中发生错误:", error);
    // 更新UI显示网络错误信息
    // temperature.textContent = "网络错误，请稍后再试";
    // description.textContent = "";
    // imageContainer.innerHTML = "";
  }
}