您的位置:

uniapp await实现页面优化的秘诀

一、了解uniapp生命周期

Uniapp是一个跨端开发框架,支持多个平台的开发。在uniapp中,了解它的生命周期对于页面的优化非常重要。Uniapp生命周期主要有三个阶段:

    <template>
        <view> hello world </view>
    </template>

    <script>
        export default{
            onLoad(){
                console.log('页面加载了')
            },
            onUnload(){
                console.log('页面卸载了')
            },
            onHide(){
                console.log('页面隐藏了')
            }
        }
    </script>

在页面渲染之前,Uniapp会先调用onLoad生命周期函数。页面卸载时,Uniapp会调用onUnload函数,而页面隐藏,Uniapp会调用onHide函数。当然,Uniapp还有其他生命周期函数,可以根据具体需求进行选择使用。

二、使用await优化api请求

在项目中,api请求是必不可少的环节。通常的做法是使用Promise或者是回调函数进行请求,而使用await可以更好地管理api请求。

    <script>
        export default{
            data(){
                return{
                    dataList:[],
                    isLoading:true
                }
            },
            async onLoad(){
                const result = await this.getData()
                this.dataList = result.data
                this.isLoading = false
            },
            methods:{
                async getData(){
                    const {data:{data}} = await uni.request({
                        url:'https://xxx.com/api/data',
                        method:'GET'
                    })
                    return {
                        data
                    }
                }
            }
        }
    </script>

在这个代码示例中,使用async关键字将onLoad生命周期函数变成异步函数,采用await等待api请求的结果。同时,在方法getData中也采用await等待api请求结果返回,从而实现更好的代码可读性和管理性。

三、封装接口请求

在实际开发中,一个接口常常被多个地方使用,而且在不同的地方使用时,传入的参数也可能有所不同。将接口进行封装,就可以在代码重复利用,提高开发效率。

    <script>
        async function getData(url, params={}){
            const {data:{data}} = await uni.request({
                url:url,
                method:'GET',
                data:params
            })
            return data
        }
        export default{
            data(){
                return{
                    dataList:[],
                    isLoading:true
                }
            },
            async onLoad(){
                this.dataList = await getData('https://xxx.com/api/data',{id:1})
                this.isLoading = false
            }
        }
    </script>

在这个代码示例中,getData函数实现了接口的封装,从而使业务代码更加简洁。在onLoad函数中,调用getData函数获取数据,并将获取的数据在页面中展示。

四、合理使用keep-alive组件

在开发过程中,经常会遇到在不同页面之间切换的情况,并且在切换后需要重新渲染页面,这会消耗一定的性能。而使用keep-alive组件可以将前一次页面渲染的结果缓存起来,这样在相同的页面之间切换时将不会重新渲染页面,提高性能。

    <template>
        <keep-alive>
            <router-view />
        </keep-alive>
    </template>

在代码示例中,router-view组件中的页面组件会被缓存起来,下一次再次访问时,直接从缓存中读取。