13-异步组件

 

 

 

<template>
  <suspense>
    <!-- 异步组件打包可以单独拆分出去  可以减少单文件体积 -->
    <template #default>  <!--默认插槽-->
      <indexVue></indexVue>
    </template>

    <template #fallback>   <!--加载时候现实loading  -->
      <div>
        loading...
      </div>
    </template>

  </suspense>
</template>

<script setup lang="ts">
// import indexVue from './A/index.vue';
import { defineAsyncComponent } from 'vue';  //使用defineAsyncComponent引入组件

const indexVue = defineAsyncComponent(() => import('../components/A/index.vue'))

</script>

<style lang="less" scoped>

</style>


<template>
  <div>
    <div v-for="(item, index) in list" :key="index">
      {{ item }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { axios } from './server';

const list = await axios('./data.json')
console.log(list)
</script>

<style lang="less" scoped>

</style>




type nameList = {
  name: string
}

export const axios = (url:string):Promise<nameList[]> => {
  return new Promise((resolve) => {
    let xhr:XMLHttpRequest = new XMLHttpRequest()

    xhr.open('get', url)
    xhr.onreadystatechange = () => {
      if(xhr.readyState === 4 && xhr.status == 200) {
        setTimeout(() => {
          resolve(JSON.parse(xhr.responseText))
        }, 2000)
      }
    }

    xhr.send(null)

  })
}