Asynchronous functions

Apparently coding involves a lot of googling things and crying on the inside when your code doesn’t work. And I learned this both through my SWE friends and the hard way. By hard way, I mean while working on our Phase 1 Project — building a single page application (SPA). SPA’s require a database, an API, and our job was to build a site that retrieved data from said API based on the user’s request.

During this phase, we learned about CRUD and Fetch(), which is how we get the data from the API. Fetch() is a weird function because it takes time to do. When the client sends a fetch request to get the data, the server needs time to compile it (and it could potentially be a lot!) and then send it back to the client as a JSON. (We then need to convert it to something JavaScript can read… but that’s not the topic for today.) This is where asynchronous functions come into play!

Basically asynchronous functions allow us to do multiple things that take different times to complete, kind of like a chef who is cooking multiple dishes/ingredients and each takes different amounts of time to cook. By chaining a .then to a fetch request, we can tell other functions to wait for the fetch to do its thing before starting their work. Here’s another analogy — a relay race where the function waits for the previous runner to hand over the baton (a “promise”). 

This is where the problem came in for me. For our project, we created a wine selector application. We have functions that allow the user to sort through the database and look for different types of wines (red, white, dessert, port, rose) and also find a wine by color and location. At 1 AM, I was fiddling with our SPA code because I wanted to write the location filter function. I wrote this using two if statements and could console log the correct search results array. However, I could not for the life of me get these results to populate on the page — I kept getting an empty array back. 

This is the near tears part. Don’t worry though— there was a nice ending. The reason why my code wasn’t working and that I was getting an empty array back was because of asynchronicity. In my code, I was running a fetch request within my if statements BUT was not accounting for the time needed for the fetch request to run. My code was returning the results BEFORE the fetch request finished, hence the empty array. The results were console logged because that ran AFTER the fetch request finished.

To solve my issue, I just had to render the results AFTER the fetch request was completed. Then viola! We have our wine results! It was a triumphant 2 AM moment. All of it captured in my commit messages on GitHub. (They are something I need to work on lol). 

I can’t wait to share the absolute (and perfectly designed to be troll-y/satirical) spicy disaster of a project with the rest of the cohort. (Shout out to the teammates who could do CSS better than I could. Perhaps I shall write about that next time…)

All this is to say, learning to code has been a challenging but rewarding experience. I’m just three weeks in — a mere baby of a SWE — but I’m excited to see what comes next!