What is Asynchronous?\nAsynchronous usually happens when we are interacting with a database or API.\nThe term asynchronous can be a bit difficult to explain. To understand it, let's take a look at what synchronous is, more specific, what synchronous task is.\nIn programming, synchronous task is a task that is executed in sequence, meaning that it will wait for current task to be finished before the next task is executed.\nOn the other hand, Asynchronous task or we can call it async task can continue executing the next task without waiting for the current task to be finished first.
Then why do we use async? We can understand it more simple using an example:\nIf we have a page that needs to load a set of images, if we do it synchronously, the page will looks like it's frozen and the user will wonder what is going on. But if we do it with async method, we can show a loading spinner while the images are being loaded from the database.\nSo async gives benefit of responsiveness, the user can still interact or in the above case, see interaction while waiting the task finished.
\nThere are two popular methods for handling async task:
\nWith Promise, we use callback function such as .then for success result and .catch for error result.
\nconst getRequest = () =>\n fetchData()\n .then(data => {\n console.log(data);\n return data;\n })\n .catch(error => console.log(error.message));With Async-await, we use it just like writing synchronous code with try catch block.
\nconst getRequest = async () => {\n try {\n const data = await fetchData();\n console.log(data);\n return data;\n } catch (error) {\n console.log(error.message);\n }\n};Which method is better? That depends on how complex or complicated the async task is, if the async task requires chaining several promises together, rather than nesting several .then functions, it is better to write it using async-await as it will make the code more readable.
"}},"pageContext":{"slug":"/asynchronous/"}},"staticQueryHashes":[]}