Handling Asynchrony in Vue 3 / Composition API

Handling Asynchrony in Vue 3 / Composition API

A couple of months ago at work, we’ve decided to go all-in on Composition API with a new version of our product. And from what I can tell — looking around at new plugins appearing, all the discussions in the discord community — the composition API gets increasingly more popular. It’s not just us.

A couple of months ago at work, we’ve decided to go all-in on Composition API with a new version of our product.

And from what I can tell — looking around at new plugins appearing, all the discussions in the discord community — the composition API gets increasingly more popular. It’s not just us.

Composition API makes a lot of things easier but it also brings some challenges as some things need to be rethought regarding how they fit into this new concept and it might take some time before the best practices are established.

One of the challenges is managing state, especially when asynchrony is involved.

I’ll try to showcase different approaches for this, including vue-concurrency, which I’ve created and that I maintain.

Managing async state

You might ask what’s there to manage? Composition API is flexible enough, this shouldn’t be a problem.

The most typical asynchronous operation is doing an AJAX request to the server. In the past years, some generic issues of AJAX have been solved or mitigated. The callback hell was extinguished with Promises and those were later sugared into async/await. Async/await is pretty awesome and the code is a joy to read compared to the original callback hell spaghetti that was often written years before.

But the fact, that things are much better now doesn’t mean that there’s no more space for improvement.

front-end-development vue javascript web-development vuejs

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire Dedicated VueJS Developers

Want to Hire VueJS Developer to develop an amazing app? **[Hire Dedicated VueJS Developers](https://hourlydeveloper.io/hire-dedicated-vue-js-developer/ "Hire Dedicated VueJS Developers")** on the contract (time/project) basis providing regular...

Vue.js Web App Development | Skenix Infotech

Our expert Vue.js developers follows Agile methodology that delivers high-quality & affordable Vue.js services. Hire Vue.js Developer from Skenix Infotech.

Top 9 Open source JavaScript frameworks for front-end web development

About a decade ago, the JavaScript developer community began to witness fierce battles emerging among JavaScript frameworks. In this article, I will introduce some of the most well-known of these frameworks. And it's important to note that these are all open source JavaScript projects, meaning that you can freely utilize them under an open source license and even contribute to the source code and communities.

Front-End Web Development Best Practices

In this article, I am going to talk about best practices to follow when structuring the project’s frontend architecture, writing front-end code, and preparing for deployment. Front-End Web Development Best Practices

Why nearly 50% of Front-End Developers want to learn Vue.js

According to the survey Vue.js is the front-end library that developers would most like to learn.