⬅️ Back to Table of Contents

📄 useAsyncValidator

📊 Analysis Summary

Metric	Count
🔧 Functions	3
📦 Imports	13
📊 Variables & Constants	1
⚡ Async/Await Patterns	4
🟢 Vue Composition API	4
📐 Interfaces	3
📑 Type Aliases	1

📚 Table of Contents

• Imports
• Variables & Constants
• Async/Await Patterns
• Vue Composition API
• Functions
• Interfaces
• Type Aliases

🛠️ File Location:

📂 packages/integrations/useAsyncValidator/index.ts

📦 Imports

Name	Source
Rules	async-validator
ValidateError	async-validator
ValidateOption	async-validator
ComputedRef	vue
MaybeRefOrGetter	vue
ShallowRef	vue
toRef	@vueuse/shared
until	@vueuse/shared
Schema	async-validator
computed	vue
shallowRef	vue
toValue	vue
watch	vue

---

Variables & Constants

Name	Type	Kind	Value	Exported
AsyncValidatorSchema	any	const	Schema.default \|\| Schema	✗

---

Async/Await Patterns

Type	Function	Await Expressions	Promise Chains
promise-chain	useAsyncValidator	none	new Promise(...), until(isFinished).toBe(true).then(() => resolve(shell)).cat...
await-expression	useAsyncValidator	validator.value.validate(valueRef.value, validateOption)	none
async-function	execute	validator.value.validate(valueRef.value, validateOption)	none
promise-chain	waitUntilFinished	none	new Promise(...), until(isFinished).toBe(true).then(() => resolve(shell)).cat...

---

Vue Composition API

Name	Type	Reactive Variables	Composables
computed	computed	none	none
computed	computed	none	none
computed	computed	none	none
watch	watch	none	none

---

Functions

useAsyncValidator(…): UseAsyncValidatorReturn & PromiseLike<UseAsyncValidatorRetu…

Wrapper for async-validator.

See: https://vueuse.org/useAsyncValidator, https://github.com/yiminghe/async-validator

Raw JSDoc

/**
 * Wrapper for async-validator.
 *
 * @see https://vueuse.org/useAsyncValidator
 * @see https://github.com/yiminghe/async-validator
 */

Calls:

• toRef (from @vueuse/shared)
• shallowRef (from vue)
• computed (from vue)
• toValue (from vue)
• validator.value.validate
• watch (from vue)
• execute
• until(isFinished).toBe(true).then(() => resolve(shell)).catch
• reject
• waitUntilFinished() .then

Code

export function useAsyncValidator(
  value: MaybeRefOrGetter<Record<string, any>>,
  rules: MaybeRefOrGetter<Rules>,
  options: UseAsyncValidatorOptions = {},
): UseAsyncValidatorReturn & PromiseLike<UseAsyncValidatorReturn> {
  const {
    validateOption = {},
    immediate = true,
    manual = false,
  } = options

  const valueRef = toRef(value)

  const errorInfo = shallowRef<AsyncValidatorError | null>(null)
  const isFinished = shallowRef(true)
  const pass = shallowRef(!immediate || manual)
  const errors = computed(() => errorInfo.value?.errors || [])
  const errorFields = computed(() => errorInfo.value?.fields || {})

  const validator = computed(() => new AsyncValidatorSchema(toValue(rules)))

  const execute = async (): Promise<UseAsyncValidatorExecuteReturn> => {
    isFinished.value = false
    pass.value = false

    try {
      await validator.value.validate(valueRef.value, validateOption)
      pass.value = true
      errorInfo.value = null
    }
    catch (err) {
      errorInfo.value = err as AsyncValidatorError
    }
    finally {
      isFinished.value = true
    }

    return {
      pass: pass.value,
      errorInfo: errorInfo.value,
      errors: errors.value,
      errorFields: errorFields.value,
    }
  }

  if (!manual) {
    watch(
      [valueRef, validator],
      () => execute(),
      { immediate, deep: true },
    )
  }

  const shell = {
    isFinished,
    pass,
    errors,
    errorInfo,
    errorFields,
    execute,
  } as UseAsyncValidatorReturn

  function waitUntilFinished() {
    return new Promise<UseAsyncValidatorReturn>((resolve, reject) => {
      until(isFinished).toBe(true).then(() => resolve(shell)).catch(error => reject(error))
    })
  }

  return {
    ...shell,
    then(onFulfilled, onRejected) {
      return waitUntilFinished()
        .then(onFulfilled, onRejected)
    },
  }
}

Internal helpers

Declared inside another function in this file.

execute(): Promise<UseAsyncValidatorExecuteReturn>

Returns: Promise<UseAsyncValidatorExecuteReturn>

Calls:

• validator.value.validate

Code

async (): Promise<UseAsyncValidatorExecuteReturn> => {
    isFinished.value = false
    pass.value = false

    try {
      await validator.value.validate(valueRef.value, validateOption)
      pass.value = true
      errorInfo.value = null
    }
    catch (err) {
      errorInfo.value = err as AsyncValidatorError
    }
    finally {
      isFinished.value = true
    }

    return {
      pass: pass.value,
      errorInfo: errorInfo.value,
      errors: errors.value,
      errorFields: errorFields.value,
    }
  }

waitUntilFinished(): Promise<UseAsyncValidatorReturn>

Returns: Promise<UseAsyncValidatorReturn>

Calls:

• until(isFinished).toBe(true).then(() => resolve(shell)).catch
• reject

Code

function waitUntilFinished() {
    return new Promise<UseAsyncValidatorReturn>((resolve, reject) => {
      until(isFinished).toBe(true).then(() => resolve(shell)).catch(error => reject(error))
    })
  }

---

Interfaces

UseAsyncValidatorExecuteReturn

Interface Code

export interface UseAsyncValidatorExecuteReturn {
  pass: boolean
  errors: AsyncValidatorError['errors'] | undefined
  errorInfo: AsyncValidatorError | null
  errorFields: AsyncValidatorError['fields'] | undefined
}

Properties

Name	Type	Optional	Description
pass	boolean	✗	not shown
errors	AsyncValidatorError['errors'] \| undefined	✗	not shown
errorInfo	AsyncValidatorError \| null	✗	not shown
errorFields	AsyncValidatorError['fields'] \| undefined	✗	not shown

UseAsyncValidatorReturn

Interface Code

export interface UseAsyncValidatorReturn {
  pass: ShallowRef<boolean>
  isFinished: ShallowRef<boolean>
  errors: ComputedRef<AsyncValidatorError['errors'] | undefined>
  errorInfo: ShallowRef<AsyncValidatorError | null>
  errorFields: ComputedRef<AsyncValidatorError['fields'] | undefined>
  execute: () => Promise<UseAsyncValidatorExecuteReturn>
}

Properties

Name	Type	Optional	Description
pass	ShallowRef<boolean>	✗	not shown
isFinished	ShallowRef<boolean>	✗	not shown
errors	ComputedRef<AsyncValidatorError['errors'] \| undefined>	✗	not shown
errorInfo	ShallowRef<AsyncValidatorError \| null>	✗	not shown
errorFields	ComputedRef<AsyncValidatorError['fields'] \| undefined>	✗	not shown
execute	() => Promise<UseAsyncValidatorExecuteReturn>	✗	not shown

UseAsyncValidatorOptions

Interface Code

export interface UseAsyncValidatorOptions {
  /**
   * @see https://github.com/yiminghe/async-validator#options
   */
  validateOption?: ValidateOption
  /**
   * The validation will be triggered right away for the first time.
   * Only works when `manual` is not set to true.
   *
   * @default true
   */
  immediate?: boolean
  /**
   * If set to true, the validation will not be triggered automatically.
   */
  manual?: boolean
}

Properties

Name	Type	Optional	Description
validateOption	ValidateOption	✓	not shown
immediate	boolean	✓	not shown
manual	boolean	✓	not shown

---

Type Aliases

AsyncValidatorError

type AsyncValidatorError = Error & {
  errors: ValidateError[]
  fields: Record<string, ValidateError[]>
};

---

Generated by Syntax Scribe