DeckOfCards API问题：无法使用指定Deck ID抽取卡牌

开发者阿泽

2026-6-18

问题解决：抽卡按钮重复创建新牌组而非使用指定ID牌组

你的问题根源很明确：每次点击按钮时，你都会先调用创建新牌组的接口，自然每次都是全新的牌组。当前代码里，drawCard函数每次执行都会先请求https://deckofcardsapi.com/api/deck/new/shuffle/生成新牌组，再用这个新ID抽卡，所以永远用不上固定的牌组ID。

正确的做法

先在页面加载时创建一次牌组并保存其ID，之后点击按钮只执行抽卡操作，不再重复创建牌组。

修改后的代码示例：

let deckId; // 全局变量保存牌组ID
const button = document.querySelector('#giveCardButton');

// 初始化牌组：页面加载时执行一次
const initDeck = async () => {
    try {
        const response = await axios.get('https://deckofcardsapi.com/api/deck/new/shuffle/?deck_count=1');
        deckId = response.data.deck_id;
        console.log('初始化牌组ID:', deckId);
    } catch (error) {
        console.error('初始化牌组失败:', error);
    }
};

// 抽卡函数：仅使用已保存的deckId抽卡
const drawCard = async () => {
    if (!deckId) {
        console.error('牌组未初始化，请先等待牌组创建完成');
        return;
    }
    try {
        const response = await axios.get(`https://deckofcardsapi.com/api/deck/${deckId}/draw/?count=1`);
        console.log('抽到的卡牌:', response.data.cards[0]);
    } catch (error) {
        console.error('抽卡失败:', error);
    }
};

// 页面加载时初始化牌组，绑定按钮点击事件
window.addEventListener('load', initDeck);
button.addEventListener('click', drawCard);