await 不影响异步 function

Question

嗨，我对 javascript 相当陌生，我在 AddEventListener 方法中的异步 function 存在问题，该方法不等待获取结果，所以当我尝试console.log(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 () => {
  var searchSongBar = document.getElementById('search_song').value; //gets string from searchbar
  sessionStorage.setItem("title", searchSongBar); //saves the string as title in sessionStorage
       
  const trackTitle = sessionStorage.getItem('title'); //takes title and puts it inside the variable to use in the url
  var urlTrack = `https://api.spotify.com/v1/search?q=${trackTitle}&type=track&market=us&limit=1&include_external=false`;
  var track_info = getTrack(urlTrack);
  console.log(track_info.tracks)
});

Answer 1

解决方案

您需要在 getTrack 的调用中添加await 。 var track_info = await getTrack(urlTrack);

有用的提示

如何等待 fetch您不需要同时await fetch 和 result.json，因为您正在等待已经返回的结果。 您可以await result.json，但是在这种情况下不需要等待 fetch，因为 fetch 返回 promise。

如何等待 promises你创建了一个异步的 function，和 fetch 一样，你需要在继续之前等待结果。 一个好的经验法则是，当您需要引用返回的数据时，您应该等待异步 function。 您等待 fetch()，以便您可以访问 result.json()。 同样，您 await getTrack() 以便您可以 console.log 它的返回值。

const getTrack = async (urlTrack) => {

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

    return result.json();
}


      

songBtn.addEventListener('click', async () => {
    var searchSongBar = document.getElementById('search_song').value; //gets string from searchbar
    sessionStorage.setItem("title", searchSongBar); //saves the string as title in sessionStorage
    const trackTitle = sessionStorage.getItem('title'); //takes title and puts it inside the variable to use in the url
    var urlTrack = `https://api.spotify.com/v1/search?q=${trackTitle}&type=track&market=us&limit=1&include_external=false`;

    var track_info = await getTrack(urlTrack);
    console.log(track_info.tracks);
});