如何在JavaScript/React中用superagent/fetch实现curl请求

核心说明 #

curl命令里的-H "X-Mashape-Key: <required>"是用来设置请求头的，对应superagent里的set()方法，fetch则是在请求配置的headers对象里定义。

修正后的superagent实现代码 #

先修正你现有代码的几个问题：dotenv需要执行config()方法，请求URL要使用传入的word参数，同时添加请求头配置：

require('dotenv').config(); // 必须调用config()方法加载.env变量
const request = require('superagent');
const baseUrl = 'https://wordsapiv1.p.mashape.com/words/';

export function getDictionaryDefinition(word) {
  return request
    .get(`${baseUrl}${word}`) // 替换硬编码的dog，使用传入的查询单词
    .set('X-Mashape-Key', process.env.MASHAPE_API_KEY) // 配置API密钥请求头
    .then((response) => {
      console.log(response.body); // 通常取response.body获取接口返回的JSON数据
      return response.body; // 返回数据给调用方，方便后续处理
    })
    .catch((err) => {
      console.error('词典请求出错:', err);
      throw err; // 抛出错误，让调用方可以捕获处理
    });
}

.env文件配置 #

在项目根目录创建.env文件，写入你的API密钥：

MASHAPE_API_KEY=你的实际Mashape密钥内容

注意：要把.env添加到.gitignore里，避免密钥泄露到代码仓库。

React项目额外注意 #

如果是用create-react-app创建的项目，不需要手动引入dotenv，它会自动加载.env文件，但变量名必须以REACT_APP_开头，比如：

REACT_APP_MASHAPE_API_KEY=你的实际Mashape密钥内容

代码里对应改成：

.set('X-Mashape-Key', process.env.REACT_APP_MASHAPE_API_KEY)

备选：fetch实现方案 #

如果需要用fetch，代码如下：

require('dotenv').config();
const baseUrl = 'https://wordsapiv1.p.mashape.com/words/';

export async function getDictionaryDefinition(word) {
  try {
    const response = await fetch(`${baseUrl}${word}`, {
      method: 'GET',
      headers: {
        'X-Mashape-Key': process.env.MASHAPE_API_KEY // 配置请求头
      }
    });

    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }

    const data = await response.json();
    console.log(data);
    return data;
  } catch (err) {
    console.error('词典请求出错:', err);
    throw err;
  }
}

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