2.3.2 • Published 10 months ago

@txe/vue-async-operations v2.3.2

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

@txe/vue-async-operations

Streamlined async operations for Vue.

Installation

Available as @txe/vue-async-operations via your preferred Node.js package manager.

Features

FunctionDescription
useLeadingOperationPrevents new async operations while one is already in progress.
useTrailingOperationIgnores previous async operations and tracks only the latest.

Example

<script setup lang="ts">
import { reactive, watch } from 'vue'
import { useTrailingOperation } from '@txe/vue-async-operations'

const form = reactive({
  query: '',
})

let abortController: AbortController | undefined

const [search, searchOperation] = useTrailingOperation(
  async ({ query }: { query: string }) => {
    abortController?.abort()
    abortController = new AbortController()

    const params = new URLSearchParams({ query, tags: 'story' })

    const response = await fetch(
      `http://hn.algolia.com/api/v1/search?${params}`,
      { signal: abortController.signal },
    )

    const data = await response.json()

    return data
  },
)

watch(
  () => form.query,
  async (query) => {
    if (query === '') {
      return
    }

    await search({ query }).catch((error) => {
      if (error instanceof DOMException && error.name === 'AbortError') {
        return
      }

      throw error
    })
  },
)
</script>

<template>
  <div>
    <form @submit.prevent>
      <input
        v-model="form.query"
        type="text"
        placeholder="Search HN stories..."
      />
    </form>

    <template v-if="searchOperation.isPending">
      <div>Searching...</div>
    </template>
    <template v-else-if="searchOperation.isFulfilled">
      <div v-for="hit of searchOperation.result.hits" :key="hit.objectID">
        <a
          :href="hit.url"
          target="_blank"
          v-html="hit._highlightResult.title?.value"
        ></a>
      </div>
    </template>
  </div>
</template>
2.1.2

10 months ago

2.1.1

10 months ago

2.3.2

10 months ago

2.2.2

10 months ago

2.1.0

10 months ago

2.0.0

10 months ago

1.0.0

10 months ago

0.1.1

10 months ago

0.1.0

10 months ago