提高效率-分包（异步组件）

�kid

于 2022-05-07 10:17:27 发布

阅读量189

点赞数 1

文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/qq_55628994/article/details/124625051

版权

这篇博客介绍了如何使用TypeScript封装axios库来从远程URL获取JSON数据，并在Vue组件中展示。通过创建一个名为axios的函数，博客详细阐述了如何设置HTTP请求并解析响应，最终将数据绑定到Vue模板上进行渲染。同时，博客还展示了如何利用Suspense组件进行懒加载，以提高应用的加载效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[
    {
        "name": "A"
    },
    {
        "name": "B"
    },
    {
        "name": "C"
    }
]

JSON数据源

 export type nameList = {
    name: string
}

export const axios = (url: string): Promise<nameList[]> => {
    return new Promise((resolve, reject) => {
        let xhl: XMLHttpRequest = new XMLHttpRequest();
        xhl.open("GET", url);

        xhl.onreadystatechange = () => {
            if (xhl.readyState === 4 && xhl.status === 200) {
                setTimeout(() => {
                    resolve(JSON.parse(xhl.responseText));
                }, 2000);
                
            }
        }
        xhl.send(null)
    })
}

severe.ts封装请求

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

<script setup lang="ts">
import {axios} from './severe';
const list=await axios('./data.json')
console.log(list);


</script>

<style scoped>

</style>

组件引入数据

<Suspense>
    <template #default>
      <A></A>
    </template>
    <template #fallback>
      <div>loding</div>
    </template>
  </Suspense>

父组件引入需要包个标签Suspense 里面有自带的两个插槽一个是defaut是加载完成渲染组件，一个是fallback，加载中渲染

分包后会多一个js文件，提高效率