# vue-use-async-hook

> Wrap async function with reactive and observable promise state

Latest version **5.0.2** (published 2022-10-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-use-async-hook
pnpm add vue-use-async-hook
yarn add vue-use-async-hook
bun add vue-use-async-hook
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 5.0.2 |
| Published | 2022-10-04 |
| First published | 2020-10-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 20.8 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 2 |
| Maintainers | chabib |
| Keywords | vue, use, async, function, promise, state, snapshot, reactive, observable, composition, hooks |

## Links

- npm: https://www.npmjs.com/package/vue-use-async-hook
- Repository: https://github.com/c5n8/vue-use-async-hook
- Issues: https://github.com/c5n8/vue-use-async-hook/issues
- npm.io page: https://npm.io/package/vue-use-async-hook

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.7.10
- [vue-extend-reactive](https://npm.io/package/vue-extend-reactive.md) ^1.1.4

## Alternatives

- [@commercetools/sync-actions](https://npm.io/package/@commercetools/sync-actions.md) — 25.1K weekly downloads
- [cwait](https://npm.io/package/cwait.md) — 21.4K weekly downloads
- [@ledgerhq/hw-app-cosmos](https://npm.io/package/@ledgerhq/hw-app-cosmos.md) — 4.2K weekly downloads
- [@financial-times/o-loading](https://npm.io/package/@financial-times/o-loading.md) — 2.8K weekly downloads
- [fa](https://npm.io/package/fa.md) — 185 weekly downloads

## Recent versions

- 5.0.2 (latest) — 2022-10-04
- 5.0.0 (next) — 2020-10-23
- 5.0.1 — 2022-09-23
- 4.0.0 — 2020-10-23
- 3.0.2 — 2020-10-23
- 2.1.4 — 2020-10-23
- 2.1.3 — 2020-10-22
- 3.0.1 — 2020-10-22
- 2.1.2 — 2020-10-22
- 2.1.1 — 2020-10-22
- 2.1.0 — 2020-10-22
- 3.0.0 — 2020-10-22
- 2.0.0 — 2020-10-22
- 1.0.0 — 2020-10-13

## README

<p align="center"><img width="100" height="100" src="https://vuejs.org/images/logo.png" alt="Vue logo"></p>

<h2 align="center">Vue Async Hook</h2>

<p align="center">
  Wrap async function with reactive and observable promise state.
</p>

#

## News

This version is compatible with Vue 2.7.
If you use Vue 3, see [Vue 3 compatible version](https://github.com/c5n8/vue-use-async-hook/tree/release/v3.0.0)

## Tips

If you want similar functionality, but as component, then checkout [vue-promise-builder](https://github.com/c5n8/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!

```vue
<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

```ts
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](http://opensource.org/licenses/MIT)

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

---
_Source: https://npm.io/package/vue-use-async-hook · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._