https://github.com/byteboomers/vue-prom

Vue promise wrapper component
https://github.com/byteboomers/vue-prom

promise vue vue-prom vuejs

Last synced: 27 days ago
JSON representation

Vue promise wrapper component

• Host: GitHub
• URL: https://github.com/byteboomers/vue-prom
• Owner: byteboomers
• License: mit
• Created: 2018-03-01T12:24:05.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-10-20T08:04:42.000Z (over 1 year ago)
• Last Synced: 2024-04-14T21:08:16.001Z (9 months ago)
• Topics: promise, vue, vue-prom, vuejs
• Language: Vue
• Homepage:
• Size: 430 KB
• Stars: 145
• Watchers: 4
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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

```bash

npm install --save vue-prom

```

[npm package link](https://www.npmjs.com/package/vue-prom)

### CDN

```html

```

## Usage

With vue-prom we would write the following:

```vue

  


      

          


              Loading user...

          

          


              Hello {{ result.firstName }} {{ result.lastName }}

          

          


              {{ error.message }}

          

      

  


import VueProm from 'vue-prom';

import api from './api';

export default {

  data() {

    api

  },

  components: {

      VueProm

  }

};

```

Instead of:

```vue

    


        


            Loading user...

        

        


            {{ error.message }}

        

        


            Hello {{ result.firstName }} {{ result.lastName }}

        

    


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

    };

  }

};

```

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.

```vue

  


      

          


              Hello {{ result.firstName }} {{ result.lastName }}

          

      

  


```

## Props

* __promise__: _required_, the promise to resolve.

* __refresh__: refresh trigger.

The component [watches](https://vuejs.org/v2/guide/computed.html#Watchers) 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.