我正在嘗試迭代 ID（track.id ）并為每個 ID 從 API（ getBPM() ）獲取一些資料（基于這些 ID ）。我很確定它與 Promises 相關，我對這些還不是很流利。這是代碼：
const getBpm = async (id) => {
const {data} = await axios.get("https://api.spotify.com/v1/audio-features", {
headers: {
Authorization: `Bearer ${token}`
},
params: {
ids: id,
}
}).catch((error) => {
console.log(error);
})
return Math.round(data[0]?.audio_features[0].tempo);
}
function renderTracks() {
return tracks?.map((track) =>
<li key={track.id} className="song-item">
<a className='link-to-song' href="">
<div className="img-with-data">
<img src={track.album.images[0].url} alt="" />
<div className="title-artist">
<p className='song-title'>{track.name}</p>
<p className='song-artist'>{track.artists[0].name}</p>
</div>
</div>
<p className="tempo">{getBpm(track.id)}</p>
</a>
</li>
)
}
我已經嘗試了一些東西，但無法讓它作業。我會很感激任何幫助
uj5u.com熱心網友回復：
當您呼叫異步函式時，您必須等待函式，例如await getBpm(track.id). 理想情況下，您不應該在 return 陳述句中獲取資料。spotify API 允許您在每個請求上獲取多個軌道。https://developer.spotify.com/console/get-audio-features-several-tracks/我會做類似的事情
const songIds = tracks.map(track => track.id).join(","); // songIds should be a string of track ID's separated by a comma (if my code errors, you know what to do)
const trackDataFromApi = await getBpm(songIds); // This will give you data for all your songs
然后你可能想要合并你的 2 個資料集。并將您的節奏資料添加到您的tracks變數中。
還有你的功能。
const getBpm = async (ids) => {
const {data} = await axios.get("https://api.spotify.com/v1/audio-features", {
headers: {
Authorization: `Bearer ${token}`
},
params: {
ids: ids, // or just ids for shorthand
}
}).catch((error) => {
console.log(error);
})
return data;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/493909.html
標籤：javascript 反应 异步 异步等待 映射
上一篇：如何匯出異步函式的輸出？[復制]