computedAsync

类别

Reactivity

导出大小

382 B

最近修改

2 days ago

别名

asyncComputed

为异步函数计算。

🌐 Computed for async functions.

示例

源代码在线运行

Evaluating: false

null

用法

🌐 Usage

TypeScript

import { computedAsync } from '@vueuse/core'
import { shallowRef } from 'vue'

const name = shallowRef('jack')

const userInfo = computedAsync(
  async () => {
    return await mockLookUp(name.value)
  },
  null, // initial state
)

import { computedAsync } from '@vueuse/core'
import { shallowRef } from 'vue'
const name = shallowRef('jack')
const userInfo = computedAsync(async () => {
  return await mockLookUp(name.value)
}, null)

评价状态

🌐 Evaluation State

传入一个引用以跟踪异步函数当前是否正在执行。

🌐 Pass a ref to track if the async function is currently evaluating.

TypeScript

import { computedAsync } from '@vueuse/core'
import { shallowRef } from 'vue'

const evaluating = shallowRef(false)

const userInfo = computedAsync(
  async () => { /* your logic */ },
  null,
  evaluating, // can also be passed via options: { evaluating }
)

import { computedAsync } from '@vueuse/core'
import { shallowRef } from 'vue'
const evaluating = shallowRef(false)
const userInfo = computedAsync(
  async () => {
    /* your logic */
  },
  null,
  evaluating,
)

onCancel

当计算出的源在前一个异步函数解决之前发生变化时，你可能想要取消前一个函数。下面是一个如何与 fetch API 结合使用的示例。

🌐 When the computed source changes before the previous async function resolves, you may want to cancel the previous one. Here is an example showing how to incorporate with the fetch API.

import { computedAsync } from '@vueuse/core'
import { shallowRef } from 'vue'

const packageName = shallowRef('@vueuse/core')

const downloads = computedAsync(async (onCancel) => {
  const abortController = new AbortController()

  onCancel(() => abortController.abort())

  return await fetch(
    `https://api.npmjs.org/downloads/point/last-week/${packageName.value}`,
    { signal: abortController.signal },
  )
    .then(response => response.ok ? response.json() : { downloads: '—' })
    .then(result => result.downloads)
}, 0)

懒惰的

🌐 Lazy

默认情况下，computedAsync 在创建时会立即开始解析。指定 lazy: true 可使其在首次访问时才开始解析。

🌐 By default, computedAsync will start resolving immediately on creation. Specify lazy: true to make it start resolving on the first access.

import { computedAsync } from '@vueuse/core'
import { shallowRef } from 'vue'

const evaluating = shallowRef(false)

const userInfo = computedAsync(
  async () => { /* your logic */ },
  null,
  { lazy: true, evaluating },
)

错误处理

🌐 Error Handling

使用 onError 回调来处理异步函数的错误。

🌐 Use the onError callback to handle errors from the async function.

import { computedAsync } from '@vueuse/core'
import { shallowRef } from 'vue'

const name = shallowRef('jack')

const userInfo = computedAsync(
  async () => {
    return await mockLookUp(name.value)
  },
  null,
  {
    onError(e) {
      console.error('Failed to fetch user info', e)
    },
  },
)

浅引用

🌐 Shallow Ref

默认情况下，computedAsync 内部使用 shallowRef。可以设置 shallow: false 来改为使用深层引用。

🌐 By default, computedAsync uses shallowRef internally. Set shallow: false to use a deep ref instead.

TypeScript

import { computedAsync } from '@vueuse/core'
import { shallowRef } from 'vue'

const name = shallowRef('jack')

const userInfo = computedAsync(
  async () => {
    return await fetchNestedData(name.value)
  },
  null,
  { shallow: false }, // enables deep reactivity
)

import { computedAsync } from '@vueuse/core'
import { shallowRef } from 'vue'
const name = shallowRef('jack')
const userInfo = computedAsync(
  async () => {
    return await fetchNestedData(name.value)
  },
  null,
  { shallow: false },
)

注意事项

🌐 Caveats

• 就像 Vue 内置的 computed 函数一样，computedAsync 会进行依赖追踪，并在依赖发生变化时自动重新计算。但请注意，只有首次调用栈中引用的依赖才会被考虑。换句话说：异步访问的依赖不会触发异步计算值的重新计算。
• 与 Vue 内置的 computed 函数不同，只要依赖发生变化，异步计算值的重新评估就会被触发，无论其结果当前是否正在被追踪。