Comment utiliser le composant asynchrone finishAsyncComponentAPI dans Vue3

Passer la fonction d'usine en paramètre

La méthode defineAsyncComponent reçoit une fonction d'usine comme utilisation de base. Cette fonction d'usine doit renvoyer une Promesse, Promessecode> Le <code>resolve doit renvoyer un composant. defineAsyncComponent方法接收一个工厂函数是它的基本用法，这个工厂函数必须返回一个Promise，Promise的resolve应该返回一个组件。

我们这里以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>

现在我们就将edd05d9b720c954eda8df66606fc7d41组件修改为异步组件，示例代码如下：

<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后才会加载edd05d9b720c954eda8df66606fc7d41组件。

传递对象类型作为参数

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

• loader：同工厂函数；

• loadingComponent：加载异步组件时展示的组件；

• errorComponent：加载组件失败时展示的组件；

• delay：显示loadingComponent之前的延迟时间，单位毫秒，默认200毫秒；

• timeout：如果提供了timeout，并且加载组件的时间超过了设定值，将显示错误组件，默认值为Infinity（单位毫秒）；

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

• onError：一个函数，该函数包含4个参数，分别是error、retry、fail和attempts，这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

Nous prenons comme exemple le projet créé par Vue Cli. Ici, j'ai apporté une légère modification et j'ai divisé l'image de la tête en un composant :🎜rrreee🎜Maintenant, nous allons edd05d9b720c954eda8df66606fc7d41 est modifié en composant asynchrone L'exemple de code est le suivant :🎜rrreee🎜Afin de voir l'effet, nous retardons l'exécution de import ,L'exemple de code est le suivant :🎜rrreee🎜Le composant edd05d9b720c954eda8df66606fc7d41 sera chargé après 2 secondes. 🎜🎜Passez le type d'objet en paramètre🎜🎜La méthode defineAsyncComponent peut également recevoir un objet en paramètre. L'objet a les paramètres suivants : 🎜

.
• 🎜loader : Identique à la fonction d'usine 🎜
• 🎜loadingComponent : Composant affiché lors du chargement de composants asynchrones ; 🎜
• 🎜 errorComponent : Le composant affiché lors de l'échec du chargement du composant ; 🎜
• 🎜delay : Le délai avant l'affichage de loadingComponent >, unité Millisecondes, par défaut 200 millisecondes ; 🎜
• 🎜timeout : Si timeout est fourni et que le temps de chargement du composant dépasse la valeur définie, une erreur s'affichera Composant, la valeur par défaut est Infinity (unité : millisecondes) 🎜
• 🎜suspensible : les composants asynchrones peuvent quitter  ; bb06e69d307cb52103d07d8f9dd385e5Contrôlez et contrôlez toujours votre propre statut de chargement. 🎜
• 🎜onError : une fonction qui contient 4 paramètres, à savoir error, retry, fail code> et <code>tentatives, ces quatre paramètres sont l'objet d'erreur, la fonction rechargée, la fonction qui termine le chargeur et le nombre de tentatives. 🎜

🎜Le code suivant montre l'utilisation du paramètre de type d'objet de la méthode defineAsyncComponent : 🎜rrreee🎜Dans le code ci-dessus, lorsque nous chargeons le composant, nous obtiendrons des erreurs de requête les deux premières fois, seul le troisième chargement réussira.Si le chargement échoue, le composant ErrorComponent sera affiché. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!