Kod tindak balas yang menghadapi respons API Spotify yang tidak dijangka

Question

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

Answer 1

Nampaknya kod anda berada di landasan yang betul, tetapi masalahnya mungkin berkaitan dengan cara token dikendalikan dan apabila permintaan kedua untuk ID pengguna dibuat. Juga, tidak perlu menggunakan dua useEffectcangkuk.

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();
}, []);