自定义Fetch类调用OpenWeatherMap接口报错，如何排查代码问题？

你提供的代码存在以下几个明确问题：

• URL格式错误：请求地址中https:/少了一个斜杠，正确的协议前缀应为https://，该问题会直接导致请求地址非法，无法正常发起接口调用。
• API密钥未替换：代码中apiKey的取值是占位符my_api_key，你需要先在OpenWeatherMap平台申请属于自己的有效API密钥，替换该占位符后才能正常通过接口鉴权。
• 缺少入参编码处理：input参数直接拼接进URL，如果输入的城市名包含空格、中文或特殊符号，会导致URL格式异常，需要用encodeURIComponent对输入值做编码处理。
• 缺少请求错误捕获逻辑：fetch方法只有在网络层面请求失败时才会抛出异常，若接口返回401（密钥错误）、404（城市不存在）等HTTP错误状态码，fetch不会主动报错，直接调用response.json()可能会得到非预期的错误结构，甚至解析失败，需要先校验response.ok属性判断请求是否成功。

修复后参考代码 #

class Fetch {
  async getCurrent(input) {
    // 替换为你自己申请的OpenWeatherMap有效API密钥
    const apiKey = "替换为你的真实API密钥";

    try {
      // 修复URL斜杠问题，同时对输入参数做编码
      const response = await fetch(
        `https://api.openweathermap.org/data/2.5/weather?q=${encodeURIComponent(input)}&appid=${apiKey}`
      );
      // 先校验HTTP请求状态是否正常
      if (!response.ok) {
        throw new Error(`请求失败，状态码：${response.status}`);
      }
      const data = await response.json();
      console.log(data);
      return data;
    } catch (err) {
      // 捕获所有异常，可根据需求做自定义处理
      console.error('天气查询出错：', err);
      throw err;
    }
  }
}

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