So verwenden Sie die asynchrone Komponente defineAsyncComponentAPI in Vue3

Übergabe der Factory-Funktion als Parameter

Die Methode defineAsyncComponent erhält als grundlegende Verwendung eine Factory-Funktion. Diese Factory-Funktion muss ein Promise, Promise zurückgeben. code> Der <code>resolve sollte eine Komponente zurückgeben. 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

Wir nehmen das von Vue Cli erstellte Projekt als Beispiel. Hier habe ich eine leichte Änderung vorgenommen und das Kopfbild in eine Komponente aufgeteilt. Der Code lautet wie folgt:🎜rrreee🎜Jetzt werden wir edd05d9b720c954eda8df66606fc7d41-Komponente wird in eine asynchrone Komponente geändert Der Beispielcode lautet wie folgt:🎜rrreee🎜Um den Effekt zu sehen, verzögern wir die Ausführung von import ,Der Beispielcode lautet wie folgt:🎜rrreee🎜Die Komponente edd05d9b720c954eda8df66606fc7d41 wird nach 2 Sekunden geladen. 🎜🎜Übergeben Sie den Objekttyp als Parameter🎜🎜Die Methode defineAsyncComponent kann auch ein Objekt als Parameter empfangen. Das Objekt verfügt über die folgenden Parameter: 🎜

• 🎜loader: Identisch mit Factory-Funktion; 🎜
• 🎜loadingComponent: Komponente, die beim Laden asynchroner Komponenten angezeigt wird; 🎜
• 🎜 errorComponent: Die angezeigte Komponente, wenn das Laden der Komponente fehlschlägt. 🎜
• 🎜delay: Die Verzögerungszeit vor der Anzeige von loadingComponent, Einheit Millisekunden, Standard 200 Millisekunden; 🎜
• 🎜timeout: Wenn timeout angegeben ist und die Zeit zum Laden der Komponente den eingestellten Wert überschreitet, Es wird ein Fehler angezeigt. Komponente, der Standardwert ist Infinity (Einheit: Millisekunden); 🎜
• 🎜suspensible: Asynchrone Komponenten können beenden bb06e69d307cb52103d07d8f9dd385e5Kontrollieren und kontrollieren Sie immer Ihren eigenen Ladestatus. 🎜
• 🎜onError: eine Funktion, die 4 Parameter enthält, nämlich error, retry, fail code> und <code>versuche, diese vier Parameter sind das Fehlerobjekt, die neu geladene Funktion, die Funktion, die den Lader beendet, und die Anzahl der Wiederholungsversuche. 🎜

🎜Der folgende Code zeigt die Verwendung des Objekttypparameters der Methode defineAsyncComponent: 🎜rrreee🎜Wenn wir im obigen Code die Komponente laden, Bei den ersten beiden Malen erhalten wir Anforderungsfehler, nur der dritte Ladevorgang wird erfolgreich sein.Wenn der Ladevorgang fehlschlägt, wird die Komponente ErrorComponent angezeigt. 🎜

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die asynchrone Komponente defineAsyncComponentAPI in Vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!