如何检测搜索的位置是否匹配API数据并在不匹配时向用户发出提醒

核心逻辑：你使用的天气API（OpenWeatherMap）的返回结果中会携带cod状态字段，请求成功时返回值为200，城市不存在、拼写错误时返回值为404，同时会附带官方错误提示信息。我们只需要补充状态判断和错误捕获逻辑，即可实现用户端的提醒功能。

注意：你可以选择新增专门的错误提示DOM节点，也可以直接复用现有城市展示节点（cityRef）展示错误信息

修改后的完整代码 #

const cityRef = document.querySelector('#location #city');
// 若使用独立提示节点，需提前在HTML中添加对应元素：<div id="error-tip" style="color: red; display: none;"></div>
const errorTipRef = document.querySelector('#error-tip');
      
const searchbar = document.querySelector('.search-bar');
searchbar.addEventListener('keypress', searchQuery);

function searchQuery(evt) {
 if (evt.keyCode == 13) {
   // 搜索前清空上一次的内容和错误提示
   errorTipRef.style.display = 'none';
   cityRef.innerText = '';
   const query = searchbar.value.trim();
   query && getData(query);
 }
}

function getData(query) {
  fetch(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`)
  .then(weather => weather.json())
  .then(res => {
    // 判断API返回的请求状态
    if (res.cod === 200 || res.cod === "200") {
      displayData(res);
    } else {
      // 优先展示API返回的错误信息，无信息则展示默认提示
      showError(res.message || "未查询到对应城市，请检查拼写后重试");
    }
  })
  // 捕获网络异常、请求失败等底层错误
  .catch(err => {
    showError("网络异常，请稍后再试");
    console.error("请求出错：", err);
  })
};


function displayData(weather) {
  cityRef.innerText = `${weather.name}, ${weather.sys.country}`;
}

// 统一封装错误提示逻辑
function showError(msg) {
  errorTipRef.innerText = msg;
  errorTipRef.style.display = 'block';
}

核心改动说明 #

• 新增错误提示节点的引用，每次发起搜索前清空上一次的状态，避免新旧内容混杂
• 在fetch的结果处理逻辑中新增状态判断，根据API返回的cod字段区分请求是否成功，失败时调用提示方法
• 新增catch块捕获网络层面的异常，避免网络波动、请求超时等场景下用户无感知
• 封装独立的showError方法统一处理错误提示逻辑，后续修改提示样式、调整展示位置只需修改该方法即可

如果你不想新增DOM节点，直接修改showError方法，将提示内容赋值给cityRef.innerText即可，也可以额外添加样式区分错误状态（比如文字改为红色）。

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