Vue3中的异步组件defineAsyncComponentAPI怎么使用

传递工厂函数作为参数

defineAsyncComponent方法接收一个工厂函数是它的基本用法,这个工厂函数必须返回一个PromisePromiseresolve应该返回一个组件。

我们这里以Vue Cli创建的项目为例,这里我稍微做了一下修改,将头部的图片拆分为一个组件,代码如下:

<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>

现在我们就将组件修改为异步组件,示例代码如下:

<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>

我们这里为了看到效果,将import延迟执行,示例代码如下:

<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>

当2s后才会加载组件。

传递对象类型作为参数

defineAsyncComponent方法也可以接收一个对象作为参数,该对象中有如下几个参数:

  • loader:同工厂函数;

  • loadingComponent:加载异步组件时展示的组件;

  • errorComponent:加载组件失败时展示的组件;

  • delay:显示loadingComponent之前的延迟时间,单位毫秒,默认200毫秒;

  • timeout:如果提供了timeout,并且加载组件的时间超过了设定值,将显示错误组件,默认值为Infinity(单位毫秒);

  • suspensible:异步组件可以退出控制,并始终控制自己的加载状态。

  • onError:一个函数,该函数包含4个参数,分别是errorretryfailattempts,这4个参数分别是错误对象、重新加载的函数、加载程序结束的函数、已经重试的次数。

如下代码展示defineAsyncComponent方法的对象类型参数的用法:

<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>

上面的代码中,我们加载组件时前两次会请求错误,只有第三次加载才会成功,如果加载失败则会展示ErrorComponent组件。

以上就是Vue3中的异步组件defineAsyncComponentAPI怎么使用的详细内容,更多请关注www.sxiaw.com其它相关文章!