JavaScript异步函数未等待fetch结果，console.log输出undefined问题

你的问题核心是调用异步函数getTrack时没有使用await关键字——async函数默认返回Promise对象，直接赋值给track_info的话，它还没完成网络请求，自然拿不到tracks属性，所以输出undefined。

修复后的代码： #

const getTrack = async (urlTrack) => {
  const result = await fetch(urlTrack, {          
    method: "GET",
    headers: { 'Authorization' : 'Bearer ' + localStorage.getItem("access_token")}
  });
  
  const data = await result.json();
  return data;
}

songBtn.addEventListener('click', async () => {
  const searchSongBar = document.getElementById('search_song').value;
  // 直接使用搜索值，无需存到sessionStorage再取出
  const urlTrack = `https://api.spotify.com/v1/search?q=${searchSongBar}&type=track&market=us&limit=1&include_external=false`;
  // 关键：添加await等待异步函数执行完成
  const track_info = await getTrack(urlTrack);
  console.log(track_info.tracks)
});

额外优化提示： #

• 你原本将搜索值存入sessionStorage再取出的操作是冗余的，直接使用searchSongBar变量即可，减少不必要的存储操作。
• 建议添加错误处理，避免请求失败导致代码崩溃：

songBtn.addEventListener('click', async () => {
  try {
    const searchSongBar = document.getElementById('search_song').value;
    const urlTrack = `https://api.spotify.com/v1/search?q=${searchSongBar}&type=track&market=us&limit=1&include_external=false`;
    const track_info = await getTrack(urlTrack);
    console.log(track_info.tracks)
  } catch (err) {
    console.error('请求出错:', err);
  }
});

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