Firebase云函数成功请求API后超时，如何解决？

你的云函数能成功获取第三方API数据，但超时是因为没有向前端发送HTTP响应。Firebase的onRequest类型云函数必须通过res对象明确返回响应，否则函数会一直等待直到超时。

1. 修复Firebase云函数的响应逻辑 #

修改fetchAPINutrition函数，在获取到第三方API数据后，用res.json()返回给前端；遇到错误时，用res.status().json()返回错误信息：

exports.fetchAPINutrition = functions.https.onRequest((req, res) => {
  const axios = require('axios');
  const ingredient = req.query.ingredient;

  const options = {
    method: 'GET',
    url: 'https://calorieninjas.p.rapidapi.com/v1/nutrition',
    params: { query: ingredient },
    headers: {
      'X-RapidAPI-Host': 'calorieninjas.p.rapidapi.com',
      'X-RapidAPI-Key': process.env.REACT_APP_RAPID_API_KEY,
    },
  };

  axios
    .request(options)
    .then((response) => {
      console.log(response.data);
      // 向前端返回JSON格式数据
      res.json(response.data);
    })
    .catch((error) => {
      console.error(error);
      // 返回错误状态码及描述
      res.status(500).json({ error: '获取营养数据失败' });
    });
});

注意：这里不需要return语句，通过res对象直接处理HTTP响应是onRequest函数的标准用法。

2. 优化前端函数的响应处理 #

修改前端的fetchFirebaseNutrition，完善数据接收和错误处理逻辑：

// 建议在组件顶部引入axios，避免每次调用重复require
import axios from 'axios';

const fetchFirebaseNutrition = async (ingredientName) => {
  try {
    const response = await axios.get(
      'http://localhost:5001/nutrition-calculator-6db9d/us-central1/fetchAPINutrition',
      { params: { ingredient: ingredientName } }
    );
    console.log(response.data);
    // 此处添加数据处理逻辑，比如更新组件状态
    // 示例：setNutritionData(response.data)
    return response.data;
  } catch (error) {
    console.error(error);
    setIsAPIConnectionDown(true);
  }
};

额外优化建议 #

• axios引入位置：不要在函数内部重复require('axios')，建议在组件顶部或单独的API模块中统一引入，提升性能。
• 云函数环境变量：确保Firebase云函数的环境变量REACT_APP_RAPID_API_KEY已正确配置（注意：云函数的环境变量需通过firebase functions:config:set命令设置，前端的REACT_APP_前缀变量不会自动同步到云函数）。
• 请求超时设置：给axios请求添加超时时间，避免无意义的等待：

  const options = {
    // ...其他配置
    timeout: 10000 // 设置10秒超时
  };
  

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