What is asynchronous loading and how does it work?
Jan 13, 2023
What is Asynchronous Processing?
In software, when you execute something synchronously, you wait for the task to finish before moving on to another task (i.e. API finishes scheduling an online class before sending an email confirmation).
When you execute something asynchronously, you can move on to another task before it finishes (i.e. API request fetching a user's order history while another API request fetches the user's account information).
In software development, developers would execute tasks asynchronously as much as possible and where appropriate in order to improve latency.
How does it work?
Asynchronous loading typically works by using callbacks, promises, or async/await functions to allow the program to continue executing other tasks while a specific function or resource is being loaded.
A callback function is a function that is passed as a parameter to another function, which is then called once the first function has finished loading. This allows the program to continue executing other tasks while the callback function is being loaded.
Promises are a more recent feature that is similar to callbacks, but with a more organized syntax. A promise represents the eventual completion of an asynchronous operation, and can be used to handle the success or failure of that operation.
Async/await functions are a more recent feature that builds on top of promises and allows for asynchronous code to be written in a synchronous-like style. The async keyword is added to the function declaration and the await keyword is used before the function that is asynchronous.
All of these methods allows the program to continue executing other tasks while a specific function or resource is being loaded, which improves the performance and user experience of the program.
What is an example of asynchronous loading?
An example of asynchronous loading would be loading a large image from a web server while a website is loading. Instead of blocking the loading of the rest of the website until the image is fully loaded, the image can be loaded asynchronously in the background, allowing the rest of the website to continue loading.
Here is an example of loading an image asynchronously using JavaScript:
In this example, the image is loaded asynchronously using the Image() constructor, and the onload function is used as a callback, which is called once the image is fully loaded. The rest of the code can continue to execute while the image is being loaded, and the image is appended to the body of the webpage once it is fully loaded.
Another example would be loading data from a server using an AJAX request, this request can be handled asynchronously so that the page doesn't freeze while waiting for the data to be loaded.
Positive feedback is feedback too!
We often think of feedback as “critical feedback”, but positive feedback is just as important! Team cohesive and effective teamwork ultimately comes from a place of positivity and a sense of forward/upward momentum. It’s difficult to have these when just focusing on critical feedback. You want to know what you’re doing right along with ways you can improve. So as much as possible, ask for positive feedback like “What did you like about [x] that you’d like to see me continue doing?” and “What was your favorite part about [x]?”
If you want to level up your technical skills and your ability to communicate and collaborate with engineers, enroll in the Skiplevel program. The Skiplevel program is a comprehensive, on-demand course + community that helps you become more technical without learning how to code.
Become more technical without learning to code with the Skiplevel program.
The Skiplevel program is specially designed for the non-engineering professional to give you the strong technical foundation you need to feel more confident in your technical abilities in your day-to-day role and during interviews.
Fullstack software engineer and tech mentor to product managers. Follow Irene on Medium!