1---
2category: Reactivity
3alias: asyncComputed
4---
5 
6# computedAsync
7 
8Computed for async functions.
9 
10## Usage
11 
12```ts
13import { computedAsync } from '@vueuse/core'
14import { shallowRef } from 'vue'
15 
16const name = shallowRef('jack')
17 
18const userInfo = computedAsync(
19  async () => {
20    return await mockLookUp(name.value)
21  },
22  null, // initial state
23)
24```
25 
26### Evaluation State
27 
28Pass a ref to track if the async function is currently evaluating.
29 
30```ts
31import { computedAsync } from '@vueuse/core'
32import { shallowRef } from 'vue'
33 
34const evaluating = shallowRef(false)
35 
36const userInfo = computedAsync(
37  async () => { /* your logic */ },
38  null,
39  evaluating, // can also be passed via options: { evaluating }
40)
41```
42 
43### onCancel
44 
45When 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.
46 
47```ts
48import { computedAsync } from '@vueuse/core'
49import { shallowRef } from 'vue'
50 
51const packageName = shallowRef('@vueuse/core')
52 
53const downloads = computedAsync(async (onCancel) => {
54  const abortController = new AbortController()
55 
56  onCancel(() => abortController.abort())
57 
58  return await fetch(
59    `https://api.npmjs.org/downloads/point/last-week/${packageName.value}`,
60    { signal: abortController.signal },
61  )
62    .then(response => response.ok ? response.json() : { downloads: '—' })
63    .then(result => result.downloads)
64}, 0)
65```
66 
67### Lazy
68 
69By default, `computedAsync` will start resolving immediately on creation. Specify `lazy: true` to make it start resolving on the first access.
70 
71```ts
72import { computedAsync } from '@vueuse/core'
73import { shallowRef } from 'vue'
74 
75const evaluating = shallowRef(false)
76 
77const userInfo = computedAsync(
78  async () => { /* your logic */ },
79  null,
80  { lazy: true, evaluating },
81)
82```
83 
84### Error Handling
85 
86Use the `onError` callback to handle errors from the async function.
87 
88```ts
89import { computedAsync } from '@vueuse/core'
90import { shallowRef } from 'vue'
91 
92const name = shallowRef('jack')
93 
94const userInfo = computedAsync(
95  async () => {
96    return await mockLookUp(name.value)
97  },
98  null,
99  {
100    onError(e) {
101      console.error('Failed to fetch user info', e)
102    },
103  },
104)
105```
106 
107### Shallow Ref
108 
109By default, `computedAsync` uses `shallowRef` internally. Set `shallow: false` to use a deep ref instead.
110 
111```ts
112import { computedAsync } from '@vueuse/core'
113import { shallowRef } from 'vue'
114 
115const name = shallowRef('jack')
116 
117const userInfo = computedAsync(
118  async () => {
119    return await fetchNestedData(name.value)
120  },
121  null,
122  { shallow: false }, // enables deep reactivity
123)
124```
125 
126## Caveats
127 
128- Just like Vue's built-in `computed` function, `computedAsync` does dependency tracking and is automatically re-evaluated when dependencies change. Note however that only dependencies referenced in the first call stack are considered for this. In other words: **Dependencies that are accessed asynchronously will not trigger re-evaluation of the async computed value.**
129 
130- As opposed to Vue's built-in `computed` function, re-evaluation of the async computed value is triggered whenever dependencies are changing, regardless of whether its result is currently being tracked or not.
131 
132## Type Declarations
133 
134```ts
135/**
136 * Handle overlapping async evaluations.
137 *
138 * @param cancelCallback The provided callback is invoked when a re-evaluation of the computed value is triggered before the previous one finished
139 */
140export type AsyncComputedOnCancel = (cancelCallback: Fn) => void
141export interface AsyncComputedOptions<
142  Lazy = boolean,
143> extends ConfigurableFlushSync {
144  /**
145   * Should value be evaluated lazily
146   *
147   * @default false
148   */
149  lazy?: Lazy
150  /**
151   * Ref passed to receive the updated of async evaluation
152   */
153  evaluating?: Ref<boolean>
154  /**
155   * Use shallowRef
156   *
157   * @default true
158   */
159  shallow?: boolean
160  /**
161   * Callback when error is caught.
162   */
163  onError?: (e: unknown) => void
164}
165/**
166 * Create an asynchronous computed dependency.
167 *
168 * @see https://vueuse.org/computedAsync
169 * @param evaluationCallback     The promise-returning callback which generates the computed value
170 * @param initialState           The initial state, used until the first evaluation finishes
171 * @param optionsOrRef           Additional options or a ref passed to receive the updates of the async evaluation
172 */
173export declare function computedAsync<T>(
174  evaluationCallback: (onCancel: AsyncComputedOnCancel) => T | Promise<T>,
175  initialState: T,
176  optionsOrRef: AsyncComputedOptions<true>,
177): ComputedRef<T>
178export declare function computedAsync<T>(
179  evaluationCallback: (onCancel: AsyncComputedOnCancel) => T | Promise<T>,
180  initialState: undefined,
181  optionsOrRef: AsyncComputedOptions<true>,
182): ComputedRef<T | undefined>
183export declare function computedAsync<T>(
184  evaluationCallback: (onCancel: AsyncComputedOnCancel) => T | Promise<T>,
185  initialState: T,
186  optionsOrRef?: Ref<boolean> | AsyncComputedOptions,
187): Ref<T>
188export declare function computedAsync<T>(
189  evaluationCallback: (onCancel: AsyncComputedOnCancel) => T | Promise<T>,
190  initialState?: undefined,
191  optionsOrRef?: Ref<boolean> | AsyncComputedOptions,
192): Ref<T | undefined>
193/** @deprecated use `computedAsync` instead */
194export declare const asyncComputed: typeof computedAsync
195```
196