reactive-promise-status

1.3.3 • Public • Published

npm downloads downloads downloads Test

Descrption

This class is designet to be used with Vue.js

You provide promise to it, and it gives you property status, which informs you if promise is pending (data are still loading), resolved (data loaded successfully) of rejected (some error). data and error contains variables provided by resolve and reject` respectively.

But what is the difference between this and standard .then().catch()? Answer is, that you can use this properties directly in vue template (for example in v-if) or computed properties, and your html will be rerendered automatically.

Example

<template>
    <div>
        <button @click="load(1)" :class="{active:active===1}">Show first article</button>
        <button @click="load(2)" :class="{active:active===2}">Show second article</button>
        <p v-if="content.status === Status.pending">Loading...</p>
        <p v-else-if="content.status === Status.resolved">{{content.data}}</p>
        <p v-else-if="content.status === Status.rejected">Error while loading article</p>
    </div>
</template>
<script>
import PromiseStatus from 'reactive-promise-status';

export default {
    data(){
        return {content:new PromiseStatus(), active:null, Status:PromiseStatus.Status}
    },
    methods:{
        load(id){
            this.active=id;
            this.content.promise = fetch(`/article/${id}`).then(response=>response.json());
        }
    }
};
</script>
<style>
    button.active{
        color:red;
    }
</style>

Note, that I created one object of type PromiseStatus, and in load method I changed its property promise. That is because if you set content as null and try to check content.state you will get exception. That's why there is 4th status noPromise

Read more

https://thebugger.home.blog/2019/10/12/promises-in-vue-how-to-do-api-requests-correctly/

Readme

Keywords

none

Package Sidebar

Install

npm i reactive-promise-status

Weekly Downloads

3

Version

1.3.3

License

MIT

Unpacked Size

27.2 kB

Total Files

14

Last publish

Collaborators

  • matrix0123456789