Cara menggunakan komponen tak segerak defineAsyncComponentAPI dalam Vue3

Lulus fungsi kilang sebagai parameter Kaedah

defineAsyncComponent menerima fungsi kilang sebagai penggunaan asasnya Fungsi kilang ini mesti mengembalikan Promise dan Promise daripada resolve harus mengembalikan a. komponen.

Mari kita ambil projek yang dibuat oleh Vue Cli sebagai contoh Di sini saya membuat sedikit pengubahsuaian dan membahagikan imej kepala kepada komponen Kodnya adalah seperti berikut:

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

Kini kami akan mengubah suai komponen <hello-world> menjadi komponen tak segerak Kod sampel adalah seperti berikut:

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

Untuk melihat kesannya, kami akan menangguhkan pelaksanaan <. 🎜> di sini, import contoh Kod adalah seperti berikut:

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

Komponen

akan dimuatkan selepas 2 saat. <hello-world>

Luluskan jenis objek sebagai parameter

Kaedah ini juga boleh menerima objek sebagai parameter Objek mempunyai parameter berikut: defineAsyncComponent

• : Fungsi kilang yang sama; loader

• : Komponen dipaparkan semasa memuatkan komponen tak segerak; Komponen komponen dipaparkan apabila gagal; loadingComponent

• : Masa tunda sebelum memaparkan errorComponent, dalam milisaat, lalai 200 milisaat

• delay: Jika loadingComponent disediakan dan masa untuk memuatkan komponen melebihi nilai yang ditetapkan, komponen ralat akan dipaparkan. Nilai lalai ialah

  (unit: milisaat);
• : Komponen tak segerak boleh keluar dari kawalan

  dan sentiasa mengawal status pemuatannya sendiri. timeouttimeoutInfinity

: Fungsi yang mengandungi 4 parameter, iaitu
• ,

  , suspensible dan <Suspense> 4 parameter ini ialah objek Ralat, fungsi dimuat semula. fungsi pemuat tamat, bilangan percubaan semula yang telah dibuat.

• Kod berikut menunjukkan penggunaan parameter jenis objek kaedah onError: error

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

  retryfailDalam kod di atas, kami akan meminta yang pertama dua kali apabila kita memuatkan Ralat komponen, hanya pemuatan ketiga akan berjaya attemptsJika pemuatan gagal, komponen akan dipaparkan.

  Atas ialah kandungan terperinci Cara menggunakan komponen tak segerak defineAsyncComponentAPI dalam Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!