ReactJs中调用Zomato API基础请求失败求助

嘿，我猜你遇到的问题十有八九是没给请求加API密钥验证——Zomato的所有接口都要求在请求头里带上你的专属user-key，这可是新手踩坑的重灾区！

我来给你把代码改对，顺便讲清楚关键点：

1. 先搞定你的API密钥 #

首先得去Zomato开发者平台注册账号，生成属于自己的user-key，这个是调用任何接口的敲门砖，没有它肯定请求失败。

2. 修正axios请求代码 #

在你的componentDidMount里，给axios加上请求头配置就行，看下面的例子：

componentDidMount() {
  // 把这里换成你自己的Zomato API密钥
  const MY_ZOMATO_KEY = "你的user-key";

  axios.get('https://developers.zomato.com/api/v2.1/categories', {
    headers: {
      'user-key': MY_ZOMATO_KEY,
      'Accept': 'application/json' // 可选，但加上能确保返回JSON格式，避免意外
    }
  })
  .then(res => {
    console.log('拿到分类数据啦:', res.data);
    // 这里可以把数据存到组件state里，比如：
    // this.setState({ categories: res.data.categories });
  })
  .catch(err => {
    // 错误处理要细致点，方便排查问题
    const errorMsg = err.response ? err.response.data : err.message;
    console.error('请求炸了:', errorMsg);
  });
}

3. 常见坑点排查 #

如果还是不行，你可以从这几个方向查：

• 确认你的user-key没过期，也没超过免费调用额度（Zomato给免费用户的额度有限，用完了会报错）
• 检查URL有没有拼写错误，确保是https://developers.zomato.com/api/v2.1/categories
• 打开浏览器控制台的Network面板，看响应状态码：
  • 401 Unauthorized：说明密钥不对或者没传对
  • 403 Forbidden：大概率是密钥过期或者额度用光了
  • 404 Not Found：肯定是URL写错了

对了，你之前那个伦敦餐厅的geocode请求失败，也是同样的原因——给它也加上同样的请求头配置就能正常调用啦。

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