如何在React中避免耗尽YouTube Data API v3配额获取频道视频ID

你当前使用的Search API每次请求消耗100配额，这是导致配额快速耗尽的核心原因。推荐改用以下两步方案，配额消耗仅为2点（远低于Search的100点）：

步骤说明 #

• 获取频道的上传列表ID：调用Channels API，通过频道ID获取其专属的「上传视频」播放列表ID，该请求仅消耗1配额。
• 从上传列表获取最新视频：调用PlaylistItems API，基于上述播放列表ID拉取最新10条视频，单请求消耗1配额。

修改后的React代码实现 #

import { useEffect, useState } from "react"
import useFetch from "../../hooks/useFetch"

export default function YoutubeEmbed() {
    const KEY = '[Redacted]'
    const CHANNEL_ID = '[Redacted]'
    const MAX_RESULTS = '10'
    const [currentVideoIndex, setCurrentVideoIndex] = useState(0)
    const [videos, setVideos] = useState([])
    const [uploadsPlaylistId, setUploadsPlaylistId] = useState('')

    // 第一步：获取频道的上传列表ID
    const { loading: loadingChannel, error: errorChannel, value: channelData } = useFetch(
        `https://youtube.googleapis.com/youtube/v3/channels?part=contentDetails&id=${CHANNEL_ID}&key=${KEY}`,
        {},
        []
    )

    // 第二步：根据上传列表ID获取视频
    const { loading: loadingVideos, error: errorVideos, value: videosData } = useFetch(
        uploadsPlaylistId 
            ? `https://youtube.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=${uploadsPlaylistId}&maxResults=${MAX_RESULTS}&order=date&key=${KEY}`
            : '',
        {},
        [uploadsPlaylistId]
    )

    const parseVideos = () => {
        return videosData?.items?.map(video => ({
            id: video.snippet.resourceId.videoId,
            title: video.snippet.title,
            description: video.snippet.description,
            thumbnails: video.snippet.thumbnails
        }))
    }

    useEffect(() => {
        if (!loadingChannel && !errorChannel) {
            // 提取上传列表ID
            const playlistId = channelData?.items[0]?.contentDetails?.relatedPlaylists?.uploads
            setUploadsPlaylistId(playlistId)
        } else if (errorChannel) {
            console.log('获取频道信息失败:', errorChannel)
        }
    }, [loadingChannel, errorChannel, channelData])

    useEffect(() => {
        if (!loadingVideos && uploadsPlaylistId && !errorVideos) {
            setVideos(parseVideos())
        } else if (errorVideos) {
            console.log('获取视频列表失败:', errorVideos)
        }
    }, [loadingVideos, uploadsPlaylistId, errorVideos, videosData])

    return (
        <>
            {videos.length > 0 ? (
                <div className="youtube-current-video">
                    <iframe
                        src={`https://www.youtube.com/embed/${videos[currentVideoIndex]?.id}`}
                        allowFullScreen
                        frameBorder="0"
                        width={`${480 * 1.5}px`}
                        height={`${270 * 1.5}px`}
                    />
                </div>
            ) : (
                <div>加载中...</div>
            )}
        </>
    )
}

配额优化说明 #

• 原方案：单Search请求消耗100配额，每日仅能调用100次（10000/100）。
• 新方案：每次完整流程（获取频道+获取视频）仅消耗2配额，每日可调用5000次，完全满足测试和生产需求。

内容的提问来源于stack exchange，提问作者Nitai Shavit