byteboomers / Vue Prom
Licence: mit
Vue promise wrapper component
Stars: ✭ 148
Projects that are alternatives of or similar to Vue Prom
Form Validation.js
The most customizable validation framework for JavaScript.
Stars: ✭ 127 (-14.19%)
Mutual labels: promise
Loaderz
⚡️ A very easy-to-use, blazing fast asset-loader using promises. Support older-browsers and preload images, audios and videos.
Stars: ✭ 130 (-12.16%)
Mutual labels: promise
Promise Throttle
A small library to throttle promises. Useful to avoid rate limiting when using REST APIs.
Stars: ✭ 121 (-18.24%)
Mutual labels: promise
Node Stratum
Stratum protocol server and client for Node.js
Stars: ✭ 129 (-12.84%)
Mutual labels: promise
Image Promise
🎑🤞 Load one or more images, return a promise. Tiny, browser-only, no dependencies.
Stars: ✭ 129 (-12.84%)
Mutual labels: promise
Functional Promises
Write code like a story w/ a powerful Fluent (function chaining) API
Stars: ✭ 141 (-4.73%)
Mutual labels: promise
Ts Polyfill
Runtime polyfills for TypeScript libs, powered by core-js! 🔋 🔩
Stars: ✭ 122 (-17.57%)
Mutual labels: promise
Sieppari
Small, fast, and complete interceptor library for Clojure/Script
Stars: ✭ 133 (-10.14%)
Mutual labels: promise
Tascalate Concurrent
Implementation of blocking (IO-Bound) cancellable java.util.concurrent.CompletionStage and related extensions to java.util.concurrent.ExecutorService-s
Stars: ✭ 144 (-2.7%)
Mutual labels: promise
Unityfx.async
Asynchronous operations (promises) for Unity3d.
Stars: ✭ 143 (-3.38%)
Mutual labels: promise
Poloniex Api Node
Poloniex API client for REST and WebSocket API
Stars: ✭ 138 (-6.76%)
Mutual labels: promise
vue-prom
Vue promise wrapper component
About
The goal of this component is to simplify rendering logic based on promise state (pending / fulfilled, rejected). The component keeps track of the promise's state and proposes slots to render content accordingly.
You should avoid this component when:
- You need to store the result of the promise (i.e to send it back later or if it is required for a computed property).
- You need to make a function call inside of the promise callback (i.e store the result in Vuex or trigger your notification library).
Installation
NPM
npm install --save vue-prom
CDN
<script src="https://unpkg.com/[email protected]"></script>
Usage
With vue-prom we would write the following:
<template>
<div>
<vue-prom :promise="api.getUser()">
<div slot="pending">
Loading user...
</div>
<div slot="then" slot-scope="{result}">
Hello {{ result.firstName }} {{ result.lastName }}
</div>
<div slot="catch" slot-scope="{error}">
{{ error.message }}
</div>
</vue-prom>
</div>
</template>
<script>
import VueProm from 'vue-prom';
import api from './api';
export default {
data() {
api
},
components: {
VueProm
}
};
</script>
Instead of:
<template>
<div>
<div v-if="loading">
Loading user...
</div>
<div v-else-if="error">
{{ error.message }}
</div>
<div v-else>
Hello {{ result.firstName }} {{ result.lastName }}
</div>
</div>
</template>
<script>
import api from './api';
export default {
created() {
this.loading = true;
this.error = null;
api
.getUser()
.then(result => (this.user = result))
.catch(error => (this.error = error))
.finally(_ => (this.loading = false));
},
data() {
return {
loading: false,
user: null
};
}
};
</script>
Alternatively, to keep the template concise, we can omit the 'pending' and 'catch' slots altogether and rely on the default labels provided by the component instead.
<template>
<div>
<vue-prom :promise="api.getUser()">
<div slot="then" slot-scope="{result}">
Hello {{ result.firstName }} {{ result.lastName }}
</div>
</vue-prom>
</div>
</template>
Props
- promise: required, the promise to resolve.
- refresh: refresh trigger.
The component watches both the promise and refresh props, the promise will automatically re-execute when the value of either of these changes.
Slots
All slots are optional.
Name | Visible when | Slot type(s) | If absent |
---|---|---|---|
pending | The promise is pending | Regular only | A span with 'Loading...' |
catch | The promise was rejected | Regular and scoped | A span with 'Error' |
then | The promise was fulfilled | Regular and scoped | A span with 'Loaded' |
Data exposed by scoped slots:
- Scoped 'catch' slot exposes the 'error' object.
- Scoped 'then' slot exposes the 'result' object.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].