adding Fetch and async functions #3
Conversation
ahmagdy
left a comment
ahmagdy
left a comment
There was a problem hiding this comment.
Good work. Added comments about async/await usage
|
|
||
| //fetching the recipes and rendering them | ||
| let builtInRecipes = [] | ||
| async function getRecipes() { |
There was a problem hiding this comment.
try to add try catch to avoid having a failure when you receive an unexpected response or when you're unable to parse the output as json
| const response = await fetch(source); | ||
| builtInRecipes = await response.json(); | ||
| const allRecipes = getAllRecipes(); | ||
| renderRecipeCard(recipesContainer, getAllRecipes()); |
There was a problem hiding this comment.
The function is called getRecipes while you renderRecipeCard here. So, the name doesn't match the job of the function.
Remember that the function should have a single job.
I suggest that you call renderRecipeCard after calling getRecipes
| renderRecipeCard(recipesContainer, getAllRecipes()); | ||
| return allRecipes | ||
| } | ||
| getRecipes(); |
There was a problem hiding this comment.
an async function should be called with await. I don't see any await.
See https://dmitripavlutin.com/javascript-fetch-async-await/
and https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
Dear Mentor,
This is the initial commit with the fetch and async function.
I am still wrapping my head around the concepts and getting a better grasp.
Still no frontend elements and I apologize for that.
I will keep trying to optimise the code while awaiting your feedback, because there are some elements that repeat and others that I feel are redundant, and that of course is not good.
Thank you again for your precious help.
S. I.