How to return response from an asynchronous call in JavaScript?
Asynchronous programming is frequently used in javascript network programming. This technique allows one to start potentially long time-dependent tasks and still be responsive to other events without ending the current execution flow. This can be performed by using async functions in JavaScript.
There are several techniques to return responses from asynchronous calls. The particular approach you choose will depend on the requirements of your application. Here are the most common approaches to handling asynchronous operations in JavaScript:
Callbacks
Callbacks are the original method for handling asynchronous programming. These callbacks allow you to provide a function to be executed that is invoked after the asynchronous function is completed. The following example shows the callback function:
// callback functionconst callbackFunction = (result) => {console.log(result)}const fetchData = (callback) => {// initiate asynchronous call to fetch data from databasegetData(callback)}// call the original function with a callback function to handle the responsefetchData(callbackFuntion)
In the above example:
Lines 2–4: We are defining a callback function.
Lines 6–9: The
getData()function makes asynchronous calls, like fetch, and receives a callback function as a parameter to handle the call. This callback function is provided by thefetchData()function from where you need to get the response.Line 12: We are calling the
fetchData()function by passing thecallBackFunction()as a parameter.
The callbacks are useful to a certain extent. Still, these turn into callback hell for developers when they need to make multiple calls to different sources, making callbacks nested until they become hard to maintain.
Async/await
In 2017, Javascript added support for async/await as a part of the ECMAScript 2017 JavaScript edition, and now it is available in all newer versions. The async and await keywords help in writing the asynchronous functions in a synchronous-looking style. An asynchronous function is a function that does not return a value immediately. Instead, it returns a promise. A promise is a way of representing an eventual result. When the asynchronous function is finished, it will resolve the promise with the result.
The async keyword is used to define asynchronous functions, while the await keyword is used to stall JavaScript from executing functions before a promise is resolved. Let's convert the above example of callback using async/await keywords. The following code block shows the async/await example:
const fetchData = async () => {// start asynchronous call to fetch data from database and and wait for it to resolveconst data = await getData()return data}// call the original function within async/await block to handle response( async () => {await fetchData()})
In the above example:
Lines 1–5: We are adding the
asynckeyword to thefetchData()function to make it asynchronous. Next, we are waiting for the response from thegetData()function using theawait()keyword.Lines 8–10: We are calling the
fetchData()function within async/await block to handle the response.
Free Resources
