如何在ES6 JavaScript中调用API获取指定名称的多个端点数据？

在ES6+环境里调用这个游戏王卡牌API获取特定名称的数据，其实用原生工具就能轻松实现，我给你梳理两种最常用的方案，都是现代JS里的标准写法：

核心思路先理清楚 #

要拿到对应卡牌的数据，关键要做这几步：

• 把卡牌名称做URL编码（就像示例里的One for One转成one%20for%20one那样，处理空格、特殊字符）
• 拼接成完整的API请求地址
• 发起请求、解析响应，还要做好错误处理

方案一：用async/await + fetch（推荐写法） #

这种写法语法简洁，可读性拉满，是ES6+之后异步请求的首选方式：

// 定义一个异步函数专门处理卡牌数据请求
async function getCardData(cardName) {
  try {
    // 对卡牌名称做URL编码，避免特殊字符破坏请求地址
    const encodedCardName = encodeURIComponent(cardName);
    // 拼接完整的API地址
    const apiEndpoint = `http://yugiohprices.com/api/card_data/${encodedCardName}`;

    // 发起GET请求
    const response = await fetch(apiEndpoint);

    // 先检查请求是否成功（HTTP状态码在200-299之间）
    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }

    // 把响应解析成JSON格式
    const result = await response.json();

    // 处理API返回的状态
    if (result.status === 'success') {
      console.log('拿到卡牌数据啦：', result.data);
      return result.data;
    } else {
      throw new Error('API返回了失败状态');
    }
  } catch (error) {
    // 捕获所有可能的错误：网络问题、请求失败、API异常等
    console.error('获取卡牌数据时出错了：', error.message);
    throw error; // 可以选择把错误抛出去，让调用方自己处理
  }
}

// 调用示例：获取"One for One"的数据
getCardData('One for One')
  .then(cardInfo => {
    // 在这里随便用拿到的数据
    console.log('卡牌名称：', cardInfo.name);
    console.log('卡牌效果：', cardInfo.text);
  })
  .catch(err => {
    // 处理调用过程中出现的错误
    console.error('调用失败：', err);
  });

方案二：用fetch + Promise链式调用（兼容早期ES6环境） #

如果你的运行环境还不支持async/await，可以用Promise的链式写法，功能是一样的：

function getCardData(cardName) {
  const encodedCardName = encodeURIComponent(cardName);
  const apiEndpoint = `http://yugiohprices.com/api/card_data/${encodedCardName}`;

  return fetch(apiEndpoint)
    .then(response => {
      if (!response.ok) {
        throw new Error(`请求失败，状态码：${response.status}`);
      }
      return response.json();
    })
    .then(result => {
      if (result.status === 'success') {
        return result.data;
      } else {
        throw new Error('API返回了失败状态');
      }
    })
    .catch(error => {
      console.error('获取卡牌数据时出错了：', error.message);
      throw error;
    });
}

// 调用示例
getCardData('One for One')
  .then(cardInfo => {
    console.log('卡牌类型：', cardInfo.card_type);
  })
  .catch(err => {
    console.error('调用出错：', err);
  });

几个必须注意的点 #

• URL编码不能忘：一定要用encodeURIComponent()处理卡牌名称，不然如果名称里有空格、&、#这类特殊字符，请求地址直接就废了。
• 错误处理要到位：网络断了、卡牌不存在返回404、API返回失败状态，这些情况都要考虑到，不然代码很容易崩。
• 跨域问题：如果是在浏览器里运行这段代码，要确认这个API是否允许跨域请求（也就是有没有设置CORS响应头）。要是遇到跨域报错，可能得通过后端代理来转发请求才行。

内容的提问来源于stack exchange，提问作者Sokratis V