我構建了一個 React 網路應用程式,允許用戶計算他們的膳食營養。
用戶在 IngredientForm 組件中輸入一種成分,觸發fetchFirebaseNutrition函式。
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 函式 fetchAPINutrition 發出獲取請求。然后,fetchAPINutrition 向 API 發出獲取營養資料的請求。我正在使用 Firebase 函式來隱藏我部署網路應用程式時的 API 密鑰。
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 作業......有點。當我從前端向函式發出請求時,我可以在 Firebase 模擬器上看到 fetchAPINutrition 成功地從 API 獲取資料。請參閱 Firebase 模擬器日志。但是,該功能只是在之后超時。因此, fetchFirebaseNutrition 永遠不會接收 API 資料,只會回傳Axios Network Error 訊息。
如何阻止我的 Firebase 函式超時并將 API 資料回傳到前端?
任何幫助將不勝感激!
uj5u.com熱心網友回復:
HTTPS 函式期望回傳,而您沒有。相反,您無需等待它完成就回傳了一個承諾。
您需要回傳一個結果。
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");
});
轉載請註明出處,本文鏈接:https://www.uj5u.com/net/507493.html
標籤:Google Cloud Collective javascript 反应 火力基地 谷歌云功能
上一篇:服務回傳空陣列