Decorator to track execution of async methods and simplify early cancelation
npm install async-execution-tracking
npm install -save 'async-execution-tracking'
usage
$3
This library allows you to decorate your async methods, track if current continuation was triggered by the latest run and cancel
if run is no longer relevant. Lets say you user is typing into an input with autocomplete options retrieved from the server.
You would like to debounce the server call somewhat (to avoid request on every keypress and only make request once the user stopped
typing for half a second). You also only want to show autocomplete options from the latest run, even if a previous request was delayed
and came back later from the server.javascript
import { trackAsync, getCurrentRunTracker } from 'async-execution-tracking'; class MyClass{
//...more code
@trackAsync()
async getAutocompleteFromServer(query){
// at the begining of the method we get the tracker
const asyncRunTracker = getCurrentRunTracker(this, 'getAutocompleteFromServer');
// give it half a second to debounce execution
await delay(500);
// cancel if there is a more recent call of this method on this object
asyncRunTracker.throwCancelationIfRunNotLatest();
const result = await repo.getAutocompleteOptions(query)
// cancel if there is a more recent call of this method on this object
// (to avoid overriding previous result if a request just lagged)
asyncRunTracker.throwCancelationIfRunNotLatest();
return result;
}
}
`If you are using something like a command pattern, where you expose objects with 'execute' method
instead of functions directly, you can use
decorator.
`javascript
import { trackAsyncNested, getCurrentRunTracker } from 'async-execution-tracking';
import { command } from 'mobx-command'; class MyClass {
//...more code
@trackAsyncNested({ property: 'execute' })
getAutocompleteFromServerCommand = command({
execute: async(query) => {
const asyncRunTracker = getCurrentRunTracker(this, 'getAutocompleteFromServerCommand');
await delay(500);
asyncRunTracker.throwCancelationIfRunNotLatest();
const result = await repo.getAutocompleteOptions(query)
asyncRunTracker.throwCancelationIfRunNotLatest();
return result;
}
});
}
`$3
In UI you often need to disable certian buttons or the whole screen while there is an outgoing request.
javascript
import { trackAsync, getCurrentRunTracker } from 'async-execution-tracking'; const decoratorOptions {
onExecutionStart(target, methodName, newRunningExecutionsCount){
target.currentExecutingFns.set(methodName, newRunningExecutionsCount);
target.isBusy = true;
},
onExecutionEnd(target, methodName, newRunningExecutionsCount, targetHasAnyExecutionsRunning){
target.currentExecutingFns.set(methodName, newRunningExecutionsCount);
target.isBusy = targetHasAnyExecutionsRunning;
}
}
class MyClass{
//@observable from your favourite library
public isBusy = false;
//@observable
public currentExecutingFns = new ObservableMapFromYourFavouriteLib();
//...more code
// this will probably be your custom decorator wrapping @trackAsync wiht above options
@trackAsync(decoratorOptions)
async someMethod(){
//...
}
}
// in your markup somwhere. This examplee is what you would have with react-mobx
disabled={this.props.vm.currentExecutingFns.get('someMethod') > 0}
onClick={()=> this.props.vm.someMethod()}>
Call someMethod
//...
``Map https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
( polyfill https://github.com/eriwen/es6-map-shim )
Promise https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
( polyfill https://github.com/taylorhakes/promise-polyfill )
As such, works in IE11 ( just promise polyfill needed) and all evergreen browsers. With Map polyfill shoould work in up to IE7.