Vue Async Hook

Wrap async function with reactive and observable promise state.

News

This version is compatible with Vue 2.7. If you use Vue 3, see Vue 3 compatible version

Tips

If you want similar functionality, but as component, then checkout vue-promise-builder.

Installation

• Using NPM

npm install vue-use-async-hook

• Using Yarn

yarn add vue-use-async-hook

Usage

This hook take a function as argument, then returns an array which contains:

• a function that has same signature as original function as first element
• a reactive promise snapshot object that reflect the state of promise returned by original function as second element

⚠️ Do not destructure returned object!

<template>
  <form @submit.prevent="submit">
    <div>
      <textarea v-model="payload.text" cols="30" rows="10"></textarea>
    </div>

    <button v-if="submission.isStandby">Submit</button>
    <button v-else-if="submission.isPending" disabled>Submitting...</button>
    <button v-if="submission.isRejected">Retry Submit</button>

    <div v-if="submission.isFulfilled">Submitted successfully!</div>
    <div v-else-if="submission.isRejected">
      Failed to submit!
      <div>{{ submission.error }}</div>
    </div>
  </form>
</template>

<script lang="ts">
import { reactive } from 'vue'
import { useAsync } from 'vue-use-async-hook'

export default {
  setup() {
    const payload = reactive({
      text: 'The quick brown fox jumps over the lazy dog.',
    })

    const [submit, submission] = useAsync(async () => {
      // TODO: implement your submit function

      // simulate successfull submission
      await new Promise((resolve) => setTimeout(resolve, 1000))

      // uncomment next line to simulate failed submission
      // throw new Error('Server error')
    })

    return {
      payload,
      submit,
      submission,
    }
  },
}
</script>

API Reference

declare function useAsync<
  F extends (...args: any[]) => Promise<any>
>(fn: F): [F, PromiseSnapshot<Unpacked<ReturnType<F>>>] {

interface PromiseSnapshot<R> {
  readonly status: 'standby' | 'pending' | 'fulfilled' | 'rejected'
  readonly result: R | undefined
  readonly error: any
  readonly isStandby: boolean
  readonly isPending: boolean
  readonly isSettled: boolean
  readonly isFulfilled: boolean | undefined
  readonly isRejected: boolean | undefined
  readonly hasResult: boolean | undefined
  readonly hasError: boolean | undefined
}

License

MIT

tags: vue, use, async, function, promise, state, snapshot, reactive, observable, composition, hooks