Reagieren Sie auf den Code, der auf eine unerwartete Spotify-API-Antwort stößt

Question

Ich erstelle eine App in React mithilfe der Spotify-API.

Zuerst erhalte ich das Zugriffstoken mit meiner clientID und meinem clientSecret. Dann versuche ich, die Benutzer-ID mithilfe dieses Tokens abzurufen. In der Dokumentation wird erwähnt, dass Sie eine Get-Anfrage stellen und das Token als Header übergeben müssen.

Das Problem ist, dass ich als Antwort immer den Fehlercode 401 erhalte. In der Dokumentation wird erwähnt, dass dieser Fehler möglicherweise darauf zurückzuführen ist, dass das Token abgelaufen ist. Aber in meinem Code versuche ich, die Benutzer-ID sofort nach Erhalt des Tokens abzurufen.

Meine zweite Frage betrifft das Stellen von Anfragen in React. Wie Sie sehen, habe ich dazu den useEffect-Hook verwendet, bin mir aber nicht sicher, ob das der richtige Ansatz ist. Außerdem fühlt sich die Art und Weise, wie ich die zweite Anfrage mache, nicht richtig an (if-Anweisung in useEffect).

Jede Hilfe wird sehr geschätzt!

P.S. apiKey und apiSecret sind globale Variablen, die erste Anfrage hat einwandfrei funktioniert, sie hat ein gültiges Token zurückgegeben, das erfolgreich verwendet wurde, um eine weitere Get-Anfrage zur Suche nach Songs zu stellen.

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]);

Answer 1

看起来你的代码走在了正确的轨道上，但问题可能与令牌的处理方式以及何时进行第二次请求用户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();
}, []);