How to use the asynchronous component defineAsyncComponentAPI in Vue3

Pass the factory function as a parameter

defineAsyncComponent The basic usage of the method is to receive a factory function. This factory function must return a Promise, Promise 's resolve should return a component.

Let’s take the project created by Vue Cli as an example. Here I made a slight modification and split the head image into a component. The code is as follows:

<template>
  <logo-img />
  <hello-world msg="Welcome to Your Vue.js App" />
</template>

<script setup>
import LogoImg from &#39;./components/LogoImg.vue&#39;
import HelloWorld from &#39;./components/HelloWorld.vue&#39;
</script>

Now we will modify the <hello-world> component into an asynchronous component. The sample code is as follows:

<template>
  <logo-img />
  <hello-world msg="Welcome to Your Vue.js App" />
</template>

<script setup>
import { defineAsyncComponent } from &#39;vue&#39;
import LogoImg from &#39;./components/LogoImg.vue&#39;

// 简单用法
const HelloWorld = defineAsyncComponent(() =>
  import(&#39;./components/HelloWorld.vue&#39;),
)
</script>

In order to see the effect here, we will importDelayed execution, The sample code is as follows:

<script setup>
import { defineAsyncComponent } from &#39;vue&#39;
import LogoImg from &#39;./components/LogoImg.vue&#39;

// 定义一个耗时执行的函数，t 表示延迟的时间， callback 表示需要执行的函数，可选
const time = (t, callback = () => {}) => {
  return new Promise(resolve => {
    setTimeout(() => {
      callback()
      resolve()
    }, t)
  })
}
// 定义异步组件，这里这样写是为了查看效果
const HelloWorld = defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    ;(async function () {
      try {
        await time(2000)
        const res = await import(&#39;./components/HelloWorld.vue&#39;)
        resolve(res)
      } catch (error) {
        reject(error)
      }
    })()
  })
})
</script>

The <hello-world> component will be loaded after 2s.

Pass the object type as a parameter

defineAsyncComponentThe method can also receive an object as a parameter. The object has the following parameters:

• loader: Same as factory function;

• loadingComponent: Component displayed when loading asynchronous components;

• errorComponent: The component displayed when loading the component fails;

• delay: Display loadingComponent The previous delay time, in milliseconds, defaults to 200 milliseconds;

• ##timeout: If timeout is provided and the time to load the component exceeds Set the value, the error component will be displayed, the default value is Infinity (unit milliseconds);

• suspensible: Asynchronous components can exitControl and always control your own loading status.

• onError: A function that contains 4 parameters, namely error, retry, fail and attempts, these four parameters are the error object, the reloaded function, the function that ends the loader, and the number of retries.

The following code shows the usage of the object type parameter of the

defineAsyncComponent method:

<template>
  <logo-img />
  <hello-world msg="Welcome to Your Vue.js App" />
</template>
<script setup>
import { defineAsyncComponent } from &#39;vue&#39;
import LogoImg from &#39;./components/LogoImg.vue&#39;
import LoadingComponent from &#39;./components/loading.vue&#39;
import ErrorComponent from &#39;./components/error.vue&#39;

// 定义一个耗时执行的函数，t 表示延迟的时间， callback 表示需要执行的函数，可选
const time = (t, callback = () => {}) => {
  return new Promise(resolve => {
    setTimeout(() => {
      callback()
      resolve()
    }, t)
  })
}
// 记录加载次数
let count = 0
const HelloWorld = defineAsyncComponent({
  // 工厂函数
  loader: () => {
    return new Promise((resolve, reject) => {
      ;(async function () {
        await time(300)
        const res = await import(&#39;./components/HelloWorld.vue&#39;)
        if (++count < 3) {
          // 前两次加载手动设置加载失败
          reject(res)
        } else {
          // 大于3次成功
          resolve(res)
        }
      })()
    })
  },
  loadingComponent: LoadingComponent,
  errorComponent: ErrorComponent,
  delay: 0,
  timeout: 1000,
  suspensible: false,
  onError(error, retry, fail, attempts) {
    // 注意，retry/fail 就像 promise 的 resolve/reject 一样：
    // 必须调用其中一个才能继续错误处理。
    if (attempts < 3) {
      // 请求发生错误时重试，最多可尝试 3 次
      console.log(attempts)
      retry()
    } else {
      fail()
    }
  },
})
</script>

In the above code, when we load the component An error will be requested twice, and only the third loading will be successful. If the loading fails, the ErrorComponent component will be displayed.

The above is the detailed content of How to use the asynchronous component defineAsyncComponentAPI in Vue3. For more information, please follow other related articles on the PHP Chinese website!