Vue-Concurrency

Inspired by ember-concurrency.

A library for encapsulating asynchronous operations and managing concurrency for Vue and Composition API.

vue-concurrency aims to provide a reasonable abstraction for performing asynchronous operations. It reduces boilerplate code, provides reliable derived state and allows new approaches to techniques like throttling, debouncing, polling. Read more about why and how in the docs:

The problem: defensive programming, race conditions

Client side applications often have to deal with managing asynchronous operations. These can be asynchronous requests to the server, logic happening in the background and also reacting to user input in various forms - scrolling, navigating, interacting with form UI and so on. We also want to create more resilient UIs which means we want to retry AJAX calls repeatedly in case of a network fail, or we want to give the user an option to retry manually.

We often have to use techniques like debouncing, throttling. On the side, we may resolve to a lot of defensive programming to do this safely and we set variable flags like isSearching, isLoading, isError by ourselves. Not only is this tedious to do over and over again, it also leaves space for bugs. Forgetting to set isLoading to false in some edgecase will leave the UI in a loading state forever. Forgetting to turn off some background operation when user transitions to a different page can lead to errors. It's better if this doesn't have to be done.

Features

  • Vue 3 + Vue 2.7 (Version >= 4.x)
  • Vue 2 + @vue/composition-api (Version < 4.x)
  • TypeScript support
  • Async cancellation via generator functions and CAF
  • Providing AbortSignal to abort XHR/Fetch requests
  • Derived reactive state to track status of async operations: isRunning, isIdle, isFinished, isCancelled and more
  • Concurrency management: drop(), restartable(), enqueue() and other tasks
  • SSR support (experimental)

Installation

1. Install with npm and yarn NPM

npm install --save vue-concurrency

YARN

yarn add vue-concurrency

2. Make sure your AJAX solution throws errors on error responses

This is necessary so that error handling works well with Tasks. Axios throws errors by default, fetch doesn't.

If you're using Fetch API

, please follow the instructions here.

3. Add polyfills for Internet Explorer (optional)

vue-concurrency uses CAF under the hood which utilizes AbortController and Symbol. Both of these are not supported in IE.If you need to support IE, you need to polyfill those two.

AbortController polyfill

Symbol polyfill is probably already included for you as it's most likely shipped as part of Vue itself. But depending from Vue version and build tooling, it might also need to be added:

Symbol polyfill

Fetch polyfill is not needed (unless you use it:))

Basic Usage

Take a look at the documentation for examples based on various scenarios like loading state, searching or saving data to store

Demos