vue-composable

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

← Lazy Promise →