posva / vue-compose-promise Goto Github PK

View Code? Open in Web Editor NEW

💝 Promises using vue composition api

License: MIT License

JavaScript 24.03% TypeScript 69.76% Vue 6.21%

vue-compose-promise's Introduction

Use Vue Promised instead

It supports Vue 2 and Vue 3

vue-compose-promise

Easily manipulate Promises and their state in Vue

Depends on @vue/composition-api

CodeSandbox demo

Installation

npm install vue-compose-promise

Usage

<template>
  <div>
    <span> Is the promise still pending: {{ usersPromise.isPending }} </span>
    <span> Is the 200ms delay over: {{ usersPromise.isDelayOver }} </span>
    <span>
      Last successfully resolved data from the promise: {{ usersPromise.data }}
    </span>
    <span> Error if current promise failed: {{ usersPromise.error }} </span>
  </div>
</template>

<script>
import { createComponent } from '@vue/composition-api'
import { usePromise } from 'vue-compose-promise'

export default createComponent({
  setup() {
    const promised = usePromise({ pendingDelay: 200, promise: fetchUsers() })

    return {
      usersPromise: promised.state,

      fetchUsers() {
        promised.state.promise = fetchUsers()
      },
    }
  },
})
</script>

Both, pendingDelay and promise can be reactive values like a computed property, a ref or a prop:

const search = ref('')
const usersPromise = computed(() => featchUsers(search.value))
const promised = usePromise({
  pendingDelay: props.displayLoaderDelay,
  promise: usersPromise,
})

API

`usePromise<T>(options?: { pendingDelay?: number | Ref<number>; promise?: Promise<T> | Ref<Promise<T>> })`

options
- pendingDelay: amount of time in ms that should be wait whenever the a new promise is pending. This allows delaying the display of a loader to avoid flashing the screen. Can be a reactive property.
- promise: initial promise. Can be null. Can be a reactive property.