1.0.12 • Published 4 years ago
vue-promise-builder v1.0.12
News
Checkout vue-promise-snapshot, if you want same functionality using composition, with Vue 2 and Vue 3 compatible versions available.
Installation
- Using NPM
npm install vue-promise-builder
- Using Yarn
yarn add vue-promise-builder
Usage
⚠️ Component must contain only one root element!
<template>
<PromiseBuilder v-slot="snapshot" :promise="generation">
<div>
<div v-if="snapshot.isStandby">
<div>Generate number 1-1000</div>
<button @click="generate()">Start</button>
</div>
<div v-else-if="snapshot.isPending">
Generating...
</div>
<div v-else-if="snapshot.isSettled">
<div v-if="snapshot.isFulfilled">
{{ snapshot.result }}
</div>
<div v-else-if="snapshot.isRejected">
{{ snapshot.error }}
</div>
<button @click="generate()">Retry</button>
</div>
</div>
</PromiseBuilder>
</template>
<script>
import { PromiseBuilder } from 'vue-promise-builder'
export default {
components: {
PromiseBuilder,
},
data() {
return {
generation: null,
}
},
methods: {
async generate() {
this.generation = generate(1, 1000)
try {
await this.generation
} catch (error) {
//
}
},
},
}
async function generate(min, max) {
await new Promise((resolve) => setTimeout(resolve, random(200, 2000)))
if (random(0, 1)) {
throw new Error('Failed to generate')
}
return random(min, max)
}
function random(min, max) {
return Math.floor(Math.random() * Math.floor(max - min + 1)) + min
}
</script>
API Reference
Props
Prop | Type | Default |
---|---|---|
promise | Promise | null |
Slots
Slot | Prop | Type |
---|---|---|
default | status | 'standby' | 'pending' | 'fulfilled' | 'rejected' |
result | any | |
error | any | |
isStandby | boolean | |
isPending | boolean | |
isSettled | boolean | |
isFulfilled | boolean | undefined | |
isRejected | boolean | undefined | |
hasResult | boolean | undefined | |
hasError | boolean | undefined |
License
1.0.12
4 years ago
1.0.11
4 years ago
1.0.10
4 years ago
1.0.9
4 years ago
1.0.8
4 years ago
1.0.7
4 years ago
1.0.6
4 years ago
1.0.5
4 years ago
1.0.4
4 years ago
1.0.2
4 years ago
1.0.3
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago
0.0.16
4 years ago
0.0.15
4 years ago
0.0.14
4 years ago
0.0.13
4 years ago
0.0.12
4 years ago
0.0.11
4 years ago
0.0.10
4 years ago
0.0.9
4 years ago
0.0.8
4 years ago
0.0.7
4 years ago
0.0.6
4 years ago
0.0.5
4 years ago
0.0.4
4 years ago
0.0.3
4 years ago
0.0.2
4 years ago
0.0.1
4 years ago