await不影响异步功能

Question

嗨，我对javascript还很陌生，AddEventListener方法中的异步函数有问题，无法等待获取结果，所以当我尝试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您不需要同时awaitfetch和result.json，因为您正在等待已经返回的结果。您可以awaitresult.json，但是在这个实例中不需要等待fetch，因为fetch返回的是promise。

如何等待promise您创建了一个异步函数，就像fetch一样，您需要等待结果才能继续。一个很好的经验法则是，无论何时需要引用返回的数据，都应该等待异步函数。您等待fetch((以便访问result.json((。同样，您等待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);
});