vue-async-operations
Managing async operations statuses in your Vue components
Install
npm install vue-async-operations
Basic usage
Vue
Then, in your component options, provide an asyncOperations
object where each key is a name of an async operation and the value is a function that returns Promise
:
//... asyncOperations: { // return Promise // ☝️vm instance is binded to function as `this` context } //...
Or you can link operation to some method in component:
//... asyncOperations: someAsyncStuff: 'someMethodName' //...
Then, trigger an operation in your component e.g. in created
hook:
//... { this$asyncsomeAsyncStuff }//...
And use operation performing state in the template:
<!-- render a loader while async operation is pending --> <!-- OR --> <!-- some stuff that shouldn't be rendered until async operation finished --> <!-- OR --> <!-- some stuff that should be displayed if async operation failed -->
Several operations in one
The function that defines an operation may return an array of promises, e.g.:
//... asyncOperations: { return this this } //...
This way, the operation state handler, that placed under the hood of this plugin, will operates via Promise.all([])
so reactive states of operation will be changed only when last promise will be resolved or rejected.
Also, you can define as much separate operations as you need:
//... asyncOperations: { //... }, { //... }, { //... }, ... }//...
Passing args
You can pass arguments to $perform()
method and receive them in operation function:
//...asyncOperations: // some operation defined as function { console // 1, 2, 3 } // another operation defined as link to some method of a component stuff2: 'loadStuff2'methods: { console // 4, 5, 6 } { this$asyncstuff1 this$asyncstuff2}//...
Handle operation result
The .$perform()
method of an operation returns Promise
and passes the result of the original promise into resolve
and reject
methods:
//... { this$asyncsomeAsyncStuff
If your operation returns an array of promises, the result will contain an array of results in the order they were defined in the original array
Also, you can handle the result directly in operation function:
//...asyncOperations: someOperation: 'someMethod'methods: { this$api
Operations composing
If you have several async operations that are leading to some common result and you need to track their reactive statuses separately but also you wanna have an aggregated reactive status for whole batch, you can compose your operations the following way:
//... asyncOperations: allAsyncStuff: {} {} //...
Then, use separate and aggregated reactive statuses
Some stuff is still loading... All stuff loaded Stuff 1 is loaded Stuff 2 is loaded
Performing composed operations with passing args
//... asyncOperations: allAsyncStuff: { console // 1, 2, 3 } { console // 4, 5, 6 } { this$asyncallAsyncStuff }//...
Operation states
$pending
$resolved
$rejected
$err
Operation methods
$perform
Plugin options
You can customize some stuff:
Vue
-
mixinPrefix
- plugin adds to your application a global mixin which injects property with operations states into the componentsdata
and according to official vuejs style guide this property is prefixed, but you can change this prefix if it's necessary for some reason -
dataPropName
- actually the name of the prop mentioned above -
computedPropName
- the name of the computed prop you use for getting acces to operations for getting its states and calling$perform()
method -
componentOptionName
- the name of the component option where you define operations
Plugin defaults are:
{
mixinPrefix: 'vueAsyncOps_',
dataPropName: 'async',
computedPropName: '$async',
componentOptionName: 'asyncOperations'
}