resolveAsyncComponent() — vue Function Reference

Architecture documentation for the resolveAsyncComponent() function in resolve-async-component.ts from the vue codebase.

Function typescript VueCore Instance calls 1

Entity Profile

VueCore→ Instance→ resolveAsyncComponent() — vue Function Reference

Dependency Diagram

graph TD
  c5b6aa28_27b6_8af3_2c0b_953fa0a2ce1e["resolveAsyncComponent()"]
  511156e5_528d_6083_42a2_c81f9d137055["resolve-async-component.ts"]
  c5b6aa28_27b6_8af3_2c0b_953fa0a2ce1e -->|defined in| 511156e5_528d_6083_42a2_c81f9d137055
  b229ed98_95ee_c05b_7df9_17b3e3dc12e3["ensureCtor()"]
  c5b6aa28_27b6_8af3_2c0b_953fa0a2ce1e -->|calls| b229ed98_95ee_c05b_7df9_17b3e3dc12e3
  style c5b6aa28_27b6_8af3_2c0b_953fa0a2ce1e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/core/vdom/helpers/resolve-async-component.ts lines 38–157

export function resolveAsyncComponent(
  factory: { (...args: any[]): any; [keye: string]: any },
  baseCtor: typeof Component
): typeof Component | void {
  if (isTrue(factory.error) && isDef(factory.errorComp)) {
    return factory.errorComp
  }

  if (isDef(factory.resolved)) {
    return factory.resolved
  }

  const owner = currentRenderingInstance
  if (owner && isDef(factory.owners) && factory.owners.indexOf(owner) === -1) {
    // already pending
    factory.owners.push(owner)
  }

  if (isTrue(factory.loading) && isDef(factory.loadingComp)) {
    return factory.loadingComp
  }

  if (owner && !isDef(factory.owners)) {
    const owners = (factory.owners = [owner])
    let sync = true
    let timerLoading: number | null = null
    let timerTimeout: number | null = null

    owner.$on('hook:destroyed', () => remove(owners, owner))

    const forceRender = (renderCompleted: boolean) => {
      for (let i = 0, l = owners.length; i < l; i++) {
        owners[i].$forceUpdate()
      }

      if (renderCompleted) {
        owners.length = 0
        if (timerLoading !== null) {
          clearTimeout(timerLoading)
          timerLoading = null
        }
        if (timerTimeout !== null) {
          clearTimeout(timerTimeout)
          timerTimeout = null
        }
      }
    }

    const resolve = once((res: Object | Component) => {
      // cache resolved
      factory.resolved = ensureCtor(res, baseCtor)
      // invoke callbacks only if this is not a synchronous resolve
      // (async resolves are shimmed as synchronous during SSR)
      if (!sync) {
        forceRender(true)
      } else {
        owners.length = 0
      }
    })

    const reject = once(reason => {
      __DEV__ &&
        warn(
          `Failed to resolve async component: ${String(factory)}` +
            (reason ? `\nReason: ${reason}` : '')
        )
      if (isDef(factory.errorComp)) {
        factory.error = true
        forceRender(true)
      }
    })

    const res = factory(resolve, reject)

    if (isObject(res)) {
      if (isPromise(res)) {
        // () => Promise
        if (isUndef(factory.resolved)) {
          res.then(resolve, reject)
        }
      } else if (isPromise(res.component)) {