在React中优雅地集成Spotify API：使用自定义Hook获取访问令牌

// useSpotifyAccessToken.js
import { useEffect, useState } from 'react';

/**
 * 自定义Hook，用于获取Spotify API的客户端凭证访问令牌。
 * @param {string} clientId - Spotify应用的客户端ID。
 * @param {string} clientSecret - Spotify应用的客户端密钥。
 * @returns {{ accessToken: string | null, isLoading: boolean, error: Error | null }} 包含访问令牌、加载状态和错误信息的对象。
 */
const useSpotifyAccessToken = (clientId, clientSecret) => {
  const [accessToken, setAccessToken] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchAccessToken = async () => {
      setIsLoading(true);
      setError(null); // 重置错误状态

      // 确保clientId和clientSecret已提供
      if (!clientId || !clientSecret) {
        setError(new Error("Spotify client ID or client secret is missing."));
        setIsLoading(false);
        return;
      }

      try {
        const requestBody = `grant_type=client_credentials&client_id=${clientId}&client_secret=${clientSecret}`;
        const requestOptions = {
          method: "POST",
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
          body: requestBody,
        };

        const response = await fetch('https://accounts.spotify.com/api/token', requestOptions);

        if (!response.ok) {
          const errorData = await response.json();
          throw new Error(`Failed to fetch Spotify access token: ${response.status} - ${errorData.error_description || response.statusText}`);
        }

        const data = await response.json();
        setAccessToken(data.access_token);
      } catch (err) {
        console.error("Error fetching Spotify access token:", err);
        setError(err);
      } finally {
        setIsLoading(false);
      }
    };

    fetchAccessToken(); // 调用异步函数

    // 依赖项数组：当clientId或clientSecret改变时，重新获取令牌
  }, [clientId, clientSecret]);

  return { accessToken, isLoading, error };
};

export default useSpotifyAccessToken;

// App.js 或其他需要令牌的组件
import React from 'react';
import useSpotifyAccessToken from './useSpotifyAccessToken'; // 导入自定义Hook

// ⚠️ 注意：在实际生产环境中，clientId和clientSecret不应硬编码在前端代码中。
// 它们应该通过环境变量、后端代理或更安全的方式获取。
const SPOTIFY_CLIENT_ID = 'YOUR_SPOTIFY_CLIENT_ID'; // 替换为您的Spotify Client ID
const SPOTIFY_CLIENT_SECRET = 'YOUR_SPOTIFY_CLIENT_SECRET'; // 替换为您的Spotify Client Secret

const App = () => {
  const { accessToken, isLoading, error } = useSpotifyAccessToken(
    SPOTIFY_CLIENT_ID,
    SPOTIFY_CLIENT_SECRET
  );

  if (isLoading) {
    return <div>正在加载Spotify访问令牌...</div>;
  }

  if (error) {
    return <div>获取Spotify访问令牌失败: {error.message}</div>;
  }

  // 令牌获取成功，现在可以使用accessToken进行其他Spotify API调用
  return (
    <div>
      <h1>Spotify API 集成示例</h1>
      {accessToken ? (
        <>
          <p>Spotify 访问令牌已获取: <code>{accessToken.substring(0, 20)}...</code></p>
          <p>您现在可以使用此令牌进行其他Spotify API请求。</p>
          {/* 示例：使用令牌调用其他Spotify API */}
          {/* <SpotifyDataFetcher accessToken={accessToken} /> */}
        </>
      ) : (
        <p>未能获取到Spotify访问令牌。</p>
      )}
    </div>
  );
};

export default App;