# Cancellable Promise
Prevents result to be set if the cancel
is called
WARNING
Javascript doesn't provide a way to cancel promises, so this will execute the promise until the end.
This uses usePromise
# Parameters
import { useCancellablePromise } from "vue-composable";
const cancellablePromise = useCancellablePromise(factory, lazy?);
const options = {
/**
* if `true` allows to catch exception when `exec()`
* @default false
*/
throwException?: boolean;
/**
* Only executes on `exec`
* @default false
*/
lazy?: boolean;
/**
* @description cancel the promise on component unmount
* @default true
*/
unmountCancel?: boolean;
}
const cancellablePromise = useCancellablePromise(factory, options?);
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 |
# State
The useCancellablePromise
function exposes the following reactive state:
import { useCancellablePromise } from "vue-composable";
const { promise, result, loading, error, cancelled } = useCancellablePromise();
State | Type | Description |
---|---|---|
promise | Promise | Current promise |
result | any | Resolved value |
loading | boolean | Waiting for the promise to be resolved |
error | any | Promise error |
cancelled | boolean | Was cancelled |
# Methods
The useCancellablePromise
function exposes the following methods:
import { useCancellablePromise } from "vue-composable";
const { exec, cancel } = useCancellablePromise();
Signature | Description |
---|---|
exec(args?) | Resolves new promise |
cancel(error?) | Cancels by rejecting promise |
# Example
loading...
# Code
<template>
<div>
<div>
<label for="delayPromise">Delay seconds</label>
<input name="delayPromise" v-model="delay" />
</div>
<div>
<button @click="exec(delay)" :disabled="loading">Execute</button>
<button @click="cancel()" :disabled="!loading">Cancel</button>
</div>
<div v-if="loading">loading...</div>
<div v-else-if="cancelled">
<p>Request cancelled</p>
<p>Result: {{ result }}</p>
<p>Error: {{ error }}</p>
</div>
<div v-else>
<p>Result: {{ result }}</p>
<p>Error: {{ error }}</p>
</div>
</div>
</template>
<script>
import { ref } from "@vue/composition-api";
import { useCancellablePromise } from "vue-composable";
export default {
name: "cancellable-promise-example",
setup() {
const {
exec,
loading,
cancel,
error,
cancelled,
result
} = useCancellablePromise(delay =>
fetch(`https://reqres.in/api/users?delay=${delay}`).then(x => x.json())
);
const delay = ref(1);
return {
delay,
exec,
error,
loading,
cancel,
cancelled,
result
};
}
};
</script>
← Lazy Promise retry →