為什么我的 Firebase function 成功發出 API 請求，但隨后超時

Question

我構建了一個 React web 應用程序，允許用戶計算他們的膳食營養。

用戶在 IngredientForm 組件中輸入一個成分，觸發fetchFirebaseNutrition function。

const fetchFirebaseNutrition = (ingredientName) => {
    const axios = require('axios');

    const options = {
      method: 'GET',
      url: 'http://localhost:5001/nutrition-calculator-6db9d/us-central1/fetchAPINutrition',
      params: { ingredient: ingredientName },
    };

    return axios
      .request(options)
      .then((response) => {
        console.log(response);
      })
      .catch((error) => {
        console.error(error);
        return setIsAPIConnectionDown(true);
      });
  };

fetchFirebaseNutrition 使用相關成分向我的 Firebase function, fetchAPINutrition發出獲取請求。 然后，fetchAPINutrition 向 API 發出獲取營養數據的請求。 我正在使用 Firebase function 來隱藏 API 密鑰，用於部署我的 Z2567A5EC9705EB7AC9DZE 應用程序。

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,
    },
  };

  return axios
    .request(options)
    .then((response) => {
      console.log(response.data);
      return response.data;
    })
    .catch((error) => {
      console.error(error);
    });
});

fetchAPINutrition 工作......有點。 當我從前端向 function 發出請求時，我可以在 Firebase 模擬器上看到 fetchAPINutrition 成功地從 ZDB974238714CA8DE634A7CE1D083A1 獲取數據。 請參閱Firebase 模擬器日志。 但是，function 之后會超時。 因此，fetchFirebaseNutrition 永遠不會收到 API 數據，只會返回Axios 網絡錯誤消息。

如何阻止我的 Firebase function 超時並將 API 數據返回到前端？

任何幫助將不勝感激！

Answer 1

HTTPS 函數期望返回，而您沒有。 相反，您將返回 promise 而不等待它完成。

您需要返回一個結果。

res.status(200).send(response.data);

在這種情況下;

axios
.request(options)
.then((response) => {
  res.status(200).send(response.data);
})
.catch((error) => {
  console.error(error);
  res.status(500).send("Error");
});