https://github.com/posva/vue-compose-promise

💝 Promises using vue composition api
https://github.com/posva/vue-compose-promise

composition promise vue vue-composition-api vue-function-api

Last synced: 12 days ago
JSON representation

💝 Promises using vue composition api

• Host: GitHub
• URL: https://github.com/posva/vue-compose-promise
• Owner: posva
• License: mit
• Created: 2019-09-25T16:15:43.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2020-11-16T22:44:39.000Z (almost 4 years ago)
• Last Synced: 2024-10-12T09:08:08.105Z (27 days ago)
• Topics: composition, promise, vue, vue-composition-api, vue-function-api
• Language: TypeScript
• Homepage: https://codesandbox.io/s/vue-compose-promise-example-toum7
• Size: 113 KB
• Stars: 76
• Watchers: 3
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: .github/CONTRIBUTING.md
  • Funding: .github/funding.yml
  • License: LICENSE
  • Code of conduct: .github/CODE_OF_CONDUCT.md

Awesome Lists containing this project

• awesome-vue-3 - vue-compose-promise - 💝 Promises using vue composition API (Packages)

README

        
# Use [Vue Promised](https://github.com/posva/vue-promised) instead

It supports Vue 2 and Vue 3

---

# vue-compose-promise [![Build Status](https://badgen.net/circleci/github/posva/vue-compose-promise)](https://circleci.com/gh/posva/vue-compose-promise) [![npm package](https://badgen.net/npm/v/vue-compose-promise)](https://www.npmjs.com/package/vue-compose-promise) [![coverage](https://badgen.net/codecov/c/github/posva/vue-compose-promise)](https://codecov.io/github/posva/vue-compose-promise) [![thanks](https://badgen.net/badge/thanks/♥/pink)](https://github.com/posva/thanks)

> Easily manipulate Promises and their state in Vue

**Depends on [@vue/composition-api](https://github.com/vuejs/composition-api)**

[CodeSandbox demo](https://codesandbox.io/s/vue-compose-promise-example-toum7)

## Installation

```sh

npm install vue-compose-promise

```

## Usage

```vue

  


     Is the promise still pending: {{ usersPromise.isPending }} 

     Is the 200ms delay over: {{ usersPromise.isDelayOver }} 

    

      Last successfully resolved data from the promise: {{ usersPromise.data }}

    

     Error if current promise failed: {{ usersPromise.error }} 

  


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()

      },

    }

  },

})

```

Both, `pendingDelay` and `promise` can be reactive values like a _computed_ property, a _ref_ or a _prop_:

```js

const search = ref('')

const usersPromise = computed(() => featchUsers(search.value))

const promised = usePromise({

  pendingDelay: props.displayLoaderDelay,

  promise: usersPromise,

})

```

## API

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

- `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.

## Related

- [vue-promised](https://github.com/posva/vue-promised)

- [@vue/composition-api](https://github.com/vuejs/composition-api)

## License

[MIT](http://opensource.org/licenses/MIT)