useAsyncState

类别

State

导出体积

931 B

上次更改

1 hour ago

响应式异步状态。不会阻塞你的设置函数，并且在 promise 准备就绪后会触发更改。状态默认为 shallowRef。

示例

源码playground (beta)

Ready: false

Loading: true

{}

用法

import { useAsyncState } from '@vueuse/core'
import axios from 'axios'

const { state, isReady, isLoading } = useAsyncState(
  axios
    .get('https://jsonplaceholder.typicode.com/todos/1')
    .then(t => t.data),
  { id: null },
)

手动触发异步函数

您也可以手动触发它。这在您想控制异步函数何时执行时非常有用。

<script setup lang="ts">
import { useAsyncState } from '@vueuse/core'

const { state, execute, executeImmediate } = useAsyncState(action, '', { immediate: false })

async function action(event) {
  await new Promise(resolve => setTimeout(resolve, 500))
  return `${event.target.textContent} clicked!`
}
</script>

<template>
  <p>State: {{ state }}</p>

  <button class="button" @click="executeImmediate">
    Execute now
  </button>

  <button class="ml-2 button" @click="event => execute(500, event)">
    Execute with delay
  </button>
</template>

类型声明

显示类型声明

export interface UseAsyncStateReturnBase<
  Data,
  Params extends any[],
  Shallow extends boolean,
> {
  state: Shallow extends true ? Ref<Data> : Ref<UnwrapRef<Data>>
  isReady: Ref<boolean>
  isLoading: Ref<boolean>
  error: Ref<unknown>
  execute: (delay?: number, ...args: Params) => Promise<Data>
  executeImmediate: (...args: Params) => Promise<Data>
}
export type UseAsyncStateReturn<
  Data,
  Params extends any[],
  Shallow extends boolean,
> = UseAsyncStateReturnBase<Data, Params, Shallow> &
  PromiseLike<UseAsyncStateReturnBase<Data, Params, Shallow>>
export interface UseAsyncStateOptions<Shallow extends boolean, D = any> {
  /**
   * Delay for the first execution of the promise when "immediate" is true. In milliseconds.
   *
   * @default 0
   */
  delay?: number
  /**
   * 在函数调用后立即执行 Promise。
   * 如果设置了延迟，将应用延迟。
   *
   * 当设置为 false 时，需要手动执行。
   *
   * @default true
   */
  immediate?: boolean
  /**
   * 捕获到错误时的回调。
   */
  onError?: (e: unknown) => void
  /**
   * 捕获到成功时的回调。
   * @param {D} data
   */
  onSuccess?: (data: D) => void
  /**
   * 在执行 Promise 前将状态设置为初始状态。
   *
   * 当多次调用执行函数时（例如，刷新数据），这可能很有用。
   * 当设置为 false 时，
   * 当前状态保持不变，直到 Promise 解析。
   *
   * @default true
   */
  resetOnExecute?: boolean
  /**
   * 使用 shallowRef。
   *
   * @default true
   */
  shallow?: Shallow
  /**
   *
   * 在执行 execute 函数时抛出错误
   *
   * @default false
   */
  throwError?: boolean
}
/**
 * 响应式的异步状态。不会阻塞你的函数，
 * 并在 Promise 完成时触发更改。
 *
 * @see https://vueuse.org/useAsyncState
 * @param promise         要解析的异步函数
 * @param initialState    初始状态，在第一次评估完成之前使用
 * @param options
 */
export declare function useAsyncState<
  Data,
  Params extends any[] = any[],
  Shallow extends boolean = true,
>(
  promise: Promise<Data> | ((...args: Params) => Promise<Data>),
  initialState: MaybeRef<Data>,
  options?: UseAsyncStateOptions<Shallow, Data>,
): UseAsyncStateReturn<Data, Params, Shallow>

源码

源码 • 演示 • 文档

贡献者

一纸忘忧

更新日志

没有最近的更新日志