vue-composable

# 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>

← retry →