# Promise
Provides promise state
# Parameters
import { usePromise } from "vue-composable"; usePromise(factory, lazy?); usePromise(factory, { lazy?, throwException? }); | Parameters | Type | Required | Default | Description |
|---|---|---|---|---|
| factory | Function | true | Factory will be called every time the exec is called, the arguments will be passed to the factory. Required | |
| lazy | Boolean | false | false | Defers execution of the factory until exec is called |
| throwException | Boolean | false | false | Makes exec throw exceptions, when false the error will be handled only by the usePromise |
WARNING
If factory argument has parameters, if lazy is false or not specified, the factory will be called without parameters. A warning will be raised in dev, to remove the warning please pass lazy:false
# State
The usePromise function exposes the following reactive state:
import { usePromise } from "vue-composable"; const { promise, result, loading, error } = usePromise(); | State | Type | Description |
|---|---|---|
| promise | Promise | Current promise |
| result | any | Resolved value |
| loading | boolean | Waiting for the promise to be resolved |
| error | any | Promise error |
# Methods
The usePromise function exposes the following methods:
import { usePromise } from "vue-composable"; const { exec } = usePromise(); | Signature | Description |
|---|---|
exec(args?) | Resolves new promise |
TIP
You can pass throwException on the last argument of the exec to override the default behaviour
# Example
loading...
# Code
<template> <div> <label for="timeout"> Duration (ms) <input type="number" name="timeout" v-model.number="timeout" /> </label> <label for="error"> Reject promise <input type="checkbox" name="error" v-model="throwError" /> </label> <button @click="exec(timeout)">Execute</button> <div v-if="loading">loading...</div> <div v-else-if="result">{{ result }}</div> <div v-else> <p>error: {{ error }}</p> </div> </div> </template> <script> import { ref } from "@vue/composition-api"; import { usePromise } from "vue-composable"; export default { name: "promise-example", setup() { const timeout = ref(1000); const throwError = ref(false); const { exec, error, loading, result } = usePromise(ms => { if (throwError.value) { return Promise.reject(new Error("Throw Error checked")); } return new Promise(res => setTimeout(() => res("sucess"), ms)); }); return { timeout, throwError, error, exec, loading, result }; } }; </script>