JavaScript获取搜索框值传入Flickr API fetch请求为空报错

你的代码存在3个核心逻辑错误，导致value取值为空：

1. 执行时序错误：fetch请求在页面加载阶段就会同步执行，不会等待用户输入、触发keydown事件。请求发起时value还是你声明时的初始空值（undefined），自然拼接到URL里是空的。
2. 事件时机错误：keydown事件触发时，输入框的value属性还没更新为当前按下的字符，哪怕事件触发你拿到的也是输入前的旧值，永远会缺最后一个输入的字符。
3. 触发逻辑缺失：你预期是点击搜索按钮后发起请求，但现有代码没有绑定搜索按钮的点击事件，也没有把fetch逻辑和用户的搜索操作做关联。

按下面的逻辑调整即可：

• 把fetch请求封装成独立函数，不要在页面加载时直接调用
• 触发搜索动作时，直接读取输入框的最新值，不要依赖提前赋值的全局变量，避免值不同步
• 给搜索按钮绑定点击事件，可选支持回车触发搜索
• 对用户输入的关键词做URL编码，避免特殊字符、中文、空格导致URL格式错误

const searchBar = document.querySelector('#search-Bar')
const searchBtn = document.querySelector('#search-btn') // 替换为你实际的搜索按钮选择器
// 提前通过地理定位接口拿到的经纬度值
let latitude, longitude

// 搜索请求逻辑封装
function getSearchResult() {
  const keyword = searchBar.value.trim()
  if (!keyword) {
    alert('请输入搜索关键词')
    return
  }
  // 拼接请求地址，对用户输入做编码
  const apiUrl = `https://shrouded-mountain-15003.herokuapp.com/https://flickr.com/services/rest/?api_key=00a31f12afffd2cff1ceeefd8cb8f3bb&format=json&nojsoncallback=1&method=flickr.photos.search&safe_search=1&per_page=5&lat=${latitude}&lon=${longitude}&text=${encodeURIComponent(keyword)}`

  fetch(apiUrl)
    .then(response => response.json())
    .then(resData => {
      // 此处写将返回的图片数据渲染到DOM的逻辑
      console.log('接口返回数据', resData)
    })
    .catch(error => {
      console.error('请求异常', error)
    })
}

// 点击搜索按钮触发请求
searchBtn.addEventListener('click', getSearchResult)

// 可选：输入框按回车键触发搜索
searchBar.addEventListener('keyup', e => {
  if (e.key === 'Enter') getSearchResult()
})

• 要等地理定位接口返回真实的经纬度、给latitude和longitude赋值完成后，再开放搜索按钮的点击能力，避免经纬度为空触发接口错误
• 不要依赖全局变量存储实时输入值，触发操作时直接读取DOM的实时属性是最稳妥的方案，从根源上避免时序导致的值不同步问题
• 所有用户可控的参数拼接到URL前，必须用encodeURIComponent()转义，否则很容易出现URL格式错误。

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