vue3 异步组件引用及使用

1 app.vue

 //同步组件引用方式

  //import A from './components/zj.vue'

//异步组件引用方式--需要配合Suspense使用

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

2 组件zj.vue

3 server.ts

type NameList = {

  name:string

}

export const axios =(url:string):Promise=>{

  return new Promise((resolve)=>{

    let xhr:XMLHttpRequest = new XMLHttpRequest()

    xhr.open('GET',url);

    xhr.onreadystatechange=()=>{

      if(xhr.readyState ===4 && xhr.status == 200){

        resolve(JSON.parse(xhr.responseText))

      }

    }

    xhr.send(null);

  })

}

4 data.json

[

  {

   

    "id":1, "name":"张三"

  },

  {

    "id":2,"name":"李四"

  },

  {

    "id":3,"name":"王五"

  },

  {

    "id":4,"name":"赵柳"

  }

]