Saya sedang membuat apl dalam React menggunakan Spotify API.
Pertama, saya mendapat token akses menggunakan clientID dan clientSecret saya. Kemudian saya cuba mendapatkan ID pengguna menggunakan token ini. Dokumentasi menyebut bahawa anda perlu membuat permintaan dapatkan dan lulus token sebagai pengepala.
Masalahnya, saya sentiasa mendapat kod ralat 401 sebagai tindak balas. Dokumentasi menyebut bahawa ralat ini mungkin disebabkan token telah tamat tempoh. Tetapi dalam kod saya, saya cuba mendapatkan ID pengguna serta-merta selepas mendapat token.
Soalan kedua saya ialah tentang membuat permintaan dalam React. Seperti yang anda lihat, saya menggunakan cangkuk useEffect untuk mencapai ini, tetapi saya tidak pasti sama ada ini pendekatan yang betul. Juga, cara saya melakukan permintaan kedua tidak sesuai (jika pernyataan di dalam useEffect).
Sebarang bantuan amat dihargai!
P.S. apiKey dan apiSecret ialah pembolehubah global, permintaan pertama berfungsi dengan baik, ia mengembalikan token yang sah, yang berjaya digunakan untuk membuat permintaan mendapatkan lain untuk mencari lagu.
const [token, setToken] = useState("");
const [userID, setUserID] = useState("");
// Obtain access token and user ID
useEffect(() => {
// Get access token
const parameters = {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
body: `grant_type=client_credentials&client_id=${apiKey}&client_secret=${apiSecret}`,
};
fetch("https://accounts.spotify.com/api/token", parameters)
.then((response) => {
return response.json();
})
.then((data) => {
setToken(data.access_token);
return data.access_token;
});
}, []);
// Obtain user ID once token is obtained
useEffect(() => {
if (token != "") {
const parameters = {
method: "GET",
headers: {
Authorization: `Bearer ${token}`,
},
};
fetch("https://api.spotify.com/v1/me", parameters)
.then((response) => {
return response.json();
})
.then((data) => {
console.log(data);
});
}
}, [token]);
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
看起来你的代码走在了正确的轨道上，但问题可能与令牌的处理方式以及何时进行第二次请求用户ID有关。此外，没有必要使用两个
useEffect钩子。const [userID, setUserID] = useState(''); useEffect(() => { // 获取访问令牌的函数 const getAccessToken = async () => { try { const response = await fetch('https://accounts.spotify.com/api/token', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, body: `grant_type=client_credentials&client_id=${apiKey}&client_secret=${apiSecret}`, }); if (!response.ok) { throw new Error('获取访问令牌失败'); } const data = await response.json(); return data.access_token; } catch (error) { console.error('获取访问令牌时发生错误:', error); return null; } }; // 获取用户ID的函数 const getUserID = async () => { const accessToken = await getAccessToken(); if (accessToken) { try { const response = await fetch('https://api.spotify.com/v1/me', { method: 'GET', headers: { 'Authorization': `Bearer ${accessToken}`, }, }); if (!response.ok) { throw new Error('获取用户ID失败'); } const data = await response.json(); setUserID(data.id); } catch (error) { console.error('获取用户ID时发生错误:', error); } } }; getUserID(); }, []);