useAsyncState

分类

状态

导出大小

931 B

上次更改

上个月

响应式异步状态。不会阻塞你的 setup 函数，并在 Promise 就绪时触发更改。状态默认是一个 shallowRef。

演示

源代码演示 (beta)

就绪: false

加载中: 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 },
)

手动触发异步函数

你也可以手动触发它。当你想要控制异步函数的执行时，这会很有用。

vue

<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
  /**
   * Execute the promise right after the function is invoked.
   * Will apply the delay if any.
   *
   * When set to false, you will need to execute it manually.
   *
   * @default true
   */
  immediate
?: boolean
  /**
   * Callback when error is caught.
   */
  onError
?: (e
: unknown) => void
  /**
   * Callback when success is caught.
   * @param {D} data
   */
  onSuccess
?: (data
: D
) => void
  /**
   * Sets the state to initialState before executing the promise.
   *
   * This can be useful when calling the execute function more than once (for
   * example, to refresh data). When set to false, the current state remains
   * unchanged until the promise resolves.
   *
   * @default true
   */
  resetOnExecute
?: boolean
  /**
   * Use shallowRef.
   *
   * @default true
   */
  shallow
?: Shallow

  /**
   *
   * An error is thrown when executing the execute function
   *
   * @default false
   */
  throwError
?: boolean
}
/**
 * Reactive async state. Will not block your setup function and will trigger changes once
 * the promise is ready.
 *
 * @see https://vueuse.org.cn/useAsyncState
 * @param promise         The promise / async function to be resolved
 * @param initialState    The initial state, used until the first evaluation finishes
 * @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
>