useAsyncState

类别

State

导出大小

974 B

最近修改

7 months ago

响应式异步状态。不会阻塞你的 setup 函数，并且一旦 promise 准备好就会触发更改。默认情况下，该状态是 shallowRef。

🌐 Reactive async state. Will not block your setup function and will trigger changes once the promise is ready. The state is a shallowRef by default.

示例

源代码在线运行

Ready: false

Loading: true

{}

用法

🌐 Usage

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

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

返回值

🌐 Return Values

属性	描述
state	异步函数的结果
isReady	当最近一次执行成功解析时为 true。每次执行时重置为 false，如果被拒绝则保持为 false
isLoading	在 Promise 挂起时为 true
error	如果 Promise 被拒绝，则为错误信息
execute	使用可选延迟重新执行异步函数
executeImmediate	立即重新执行（execute(0) 的简写）

等待结果

🌐 Awaiting the Result

返回值是可 then 的，因此你可以在异步函数中使用 await 它，或者使用 <script setup>：

🌐 The return value is thenable, so you can await it in async functions or <script setup>:

TypeScript

const { state, isReady } = await useAsyncState(fetchData, null)
// `state` is now populated, `isReady` is true

'use strict'
const { state, isReady } = await useAsyncState(fetchData, null)
// `state` is now populated, `isReady` is true

手动执行

🌐 Manual Execution

将 immediate: false 设置为防止在创建时自动执行。

🌐 Set immediate: false to prevent automatic execution on creation.

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

选项

🌐 Options

TypeScript

const { state } = useAsyncState(promise, initialState, {
  // Execute immediately on creation (default: true)
  immediate: true,
  // Delay before first execution in ms (default: 0)
  delay: 0,
  // Reset state to initial before each execution (default: true)
  resetOnExecute: true,
  // Use shallowRef for state (default: true)
  shallow: true,
  // Throw errors instead of catching them (default: false)
  throwError: false,
  // Called when promise resolves
  onSuccess(data) {
    console.log('Success:', data)
  },
  // Called when promise rejects
  onError(error) {
    console.error('Error:', error)
  },
})

'use strict'
const { state } = useAsyncState(promise, initialState, {
  // Execute immediately on creation (default: true)
  immediate: true,
  // Delay before first execution in ms (default: 0)
  delay: 0,
  // Reset state to initial before each execution (default: true)
  resetOnExecute: true,
  // Use shallowRef for state (default: true)
  shallow: true,
  // Throw errors instead of catching them (default: false)
  throwError: false,
  // Called when promise resolves
  onSuccess(data) {
    console.log('Success:', data)
  },
  // Called when promise rejects
  onError(error) {
    console.error('Error:', error)
  },
})