Question

我正在使用 Spotify普森作读。

First, I obtain access token using my clientID and clientSecret. Then, I am trying to use this token to obtain userID. Documentation says that one needs to make get request and pass token as header.

问题在于,我总是有401部法典。文件提到,这一错误可能是由于被证明已经过期。但是,在我的法典中,我试图在我被打脚踢后立即获得用户信息数据库。

我的第二个问题是要求重新处理。如你所看到的那样,我正在利用“效果”来做这项工作,但我并不真正知道这是好的做法。此外,我提出第二次请求的方式并不真正感到 n(如果说在使用效果中的话)。

感谢任何帮助!

P.S. apiKey and apiSecret are global factors, and first request work Justvy, it reable token, which is amended used to make another receive request for searching歌曲.

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

It seems like your code is on the right track, but the issue might be related to how the token is being handled and when the second request for the user ID is being made. Also in there no need to use two useEffect hooks.

    const [userID, setUserID] = useState(  );

useEffect(() => {
  // Function to obtain access token
  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( Failed to fetch access token );
      }

      const data = await response.json();
      return data.access_token;
    } catch (error) {
      console.error( Error fetching access token: , error);
      return null;
    }
  };

  // Function to obtain user 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( Failed to fetch user ID );
        }

        const data = await response.json();
        setUserID(data.id);
      } catch (error) {
        console.error( Error fetching user ID: , error);
      }
    }
  }; 

 getUserID();
}, []);

友情链接