异步组件

先说一下什么是异步，比如你现在在吃饭而且在玩手机，互不干扰，这种方式就叫异步，异步组件也就是将一个大的代码块分割成一些小的模块，减少了体积，增加的性能优化

原生Ajax封装axios

写一个get请求，利用Promise请求，它有两个回调，一个是resolve，一个是reject，这里就先写一下resolve，然后在这个里面封装ajax

export const axios = {
  get<T>(url:string) {
    return new Promise((resolve) => {
      
    })
  }
}

先创建 XMLHttpRequest 对象，XMLHttpRequest 用于在后台与服务器交换数据

const xhr = new XMLHttpRequest();

利用 open 建立http请求，有5个参数(method,url,async,username,password)，

HTTP的请求方式，必须参数
请求的URL字符串，必须参数
是否为异步方式，默认是true
服务器的用户名可选参数
服务器的密码可选参数

xhr.open('GET', url);

当状态改变时，会触发 onreadystatechange 回调函数，通过判断 readyState 来监听状态，readyState分为5步，0-未初始化、1-载入、2-载入完成、3-交互、4-完成；我们来判断是不是等于4，是的话，在进行下一步操作

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

获取XML数据，这里返回的是 responseText 类型的数据，用JSON.parse返回对象

JSON.parse(xhr.responseText)

建立连接后可以通过 send(body) 发送信息,body就是要传输的信息，没有就用null

xhr.send(null)

这里就封装好了，也可以直接按照axios来使用，

页面使用，引入即可，我们利用async await来搭配使用

注意的是 await在ES7之后就可以直接使用，这个顶层await，可以不搭配async使用了，await下面的代码都会变成异步

这就是异步组件，之后就是data渲染dom操作

import { axios} from '../../serve/axios.ts';
interface Data {
  data: {
    name: string,
    age: number,
    url:string,
    desc: string
  }
}

const { data } =  await axios.get<Data>('./data.json')

注意引入的时候一定要使用defineAsyncComponent这个函数去做引入，还需要import因函数模式引入，因为他是异步组件

const SyncVue = defineAsyncComponent(() => import('./components/Dialog/index.vue'))

组件展示的话，必须使用v3的内置组件suspense,他会提供两个插槽，一个是 #default 要展示的组件，另一个就是 #fallback 就是在加载的时候去做点什么，可以做一些延迟等操作，这就是异步组件的应用场景

  <suspense>
    <template #default>
      <SyncVue></SyncVue>
    </template>
    <template #fallback></template>
  </suspense>

只要是 import 函数所引入的东西，都会做一个代码拆解，将打包的体积分成多个，只有页面在使用的时候，才会去做一个加载，避免vue启动项目造成白屏的现象

代码分包，原生ajax的见解

异步组件

原生Ajax封装axios