Transform your Promises into components
npm install --save vue-promised
# or
yarn add vue-promisedImport the component to use it
import Promised from 'vue-promised'
Vue.component('Promised', Promised)promise should be a Promise. data will contain the result of the promise. You can of course name it the way you want:
<Promised :promise="promise">
<!--
Use the default slot for loading content
Make sure to have ONLY 1 NODE
(you can always nest things inside of a div
-->
<h1 slot="pending">Loading</h1>
<!-- The default scoped slots will be used as the result -->
<h1 slot="then" slot-scope="data">Success!</h1>
<!-- The 'catch' named scoped slots will be used if there is an error -->
<h1 slot="catch" slot-scope="error">Error: {{ error.message }}</h1>
</Promised>You can omit the pending and then names, VuePromised will pick them up automatically, resulting in a more concise writing:
<Promised :promise="promise">
<h1>Loading</h1>
<h1 slot-scope="data">Success!</h1>
<h1 slot="catch" slot-scope="error">Error: {{ error.message }}</h1>
</Promised>You can also pass an array of Promises with the prop promises but keep in mind the order is not maintained for the resolved items:
<Promised :promises="promises">
<h2>Wating for first result</h2>
<h2 slot-scope="items">
Succeeded {{ items.length }} times
</h2>
<h2 slot="catch" slot-scope="errors">
Failed {{ errors.length }} promises
</h2>
</Promised>Promised will watch its prop promise and change its state accordingly.
| Name | Description | Type |
|---|---|---|
promise |
Promise to be resolved | Promise |
promises |
Array of Promises to be resolved | Promise |
pending and then slots are provided in case you prefer a more explicit approach.
| Name | Description | Scope |
|---|---|---|
| default | Content to display while the promise is pending | — |
| default | Content to display once the promise has been successfully resolved | data: resolved value |
catch |
Content to display if the promise is rejected | error: rejection reason |
pending |
Same as non scoped default | — |
then |
Same as scoped default | data: resolved value |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent