活用async/await，让Vue变得更好用的装饰器！

绝地灬酷狼 2022-10-09 04:56 219阅读 0赞

点击上方 程序员成长指北，关注公众号

回复1，加入高级Node交流群

> 作者：OLong
> 
> 原文：https://segmentfault.com/a/1190000037604556

下文三个装饰器，都是利用了async/await把异步变成同步的特性实现的。

要求被装饰的方法必须写成async/await，用起来十分方便，实现彻底被隐藏在了装饰器内部。

前两个都是用在ts环境下class写法的vue里的。不过看清楚逻辑后，很容易修改成可以用在js环境中的vue组件上。

## 1. 给vue添加一个指示初始化完成的变量。 ##

> 指业务相关的初始化逻辑都完成了 比如搜索功能：搜索中显示loading，结果为空时显示暂无数据。但是第一次打开页面时，搜索还没完成，但显示暂无数据又不合适 这个时候就需要一个这样的变量处理边界情况 用于ts环境下的vue

通过装饰器添加这个属性，并包装vue的created, mounted和beforeDestroy方法。当created或者mounted里发出的请求完成后，就把pageIsReady设为true。使用这个装饰器时，在业务代码中完全无感，没有任何心智负担。

import { Constructor } from "vue/types/options";
    export type WrapReadyProperty<T> = T & { pageIsReady?: boolean }
    /**
     * 在@compontent 之后使用这个装饰器，
     * 组件就会被注入属性 pageIsReady，
     * 当created和mounted都执行完成时 pageIsReady 变成true，
     * 要求mounted或created是async/await。(取决于在哪个方法中发请求初始化组件)
     * 然后可以在template中直接使用。
     * 在script中使用调用isPageReady.call(this)方法；
        */
    export default function PageReadyStatus() {
        let createdDone = false;
        let mountedDone = false;
        function isCreatedMountedAllDone() {
            return createdDone && mountedDone;
        }
        return function pageReadyEnhancement<T extends Constructor>(target: T) {
            const oldMounted = target.prototype.mounted || function() { }
            const oldCreated = target.prototype.created || function() { }
            const oldBeforeDestroy = target.prototype.beforeDestroy || function() { }
            target.prototype.pageIsReady = false;
            target.prototype.created = async function(...params: any[]) {
                await oldCreated.apply(this, params);
                createdDone = true;
                this.pageIsReady = isCreatedMountedAllDone()
            }
            target.prototype.mounted = async function(...params: any[]) {
                await oldMounted.apply(this, params);
                mountedDone = true;
                this.pageIsReady = isCreatedMountedAllDone()
            }
            target.prototype.beforeDestroy = async function(...params: any[]) {
                await oldBeforeDestroy.apply(this, params);
                mountedDone = false;
                createdDone = false;
                this.pageIsReady = false;
            }
            return target
        };
    }
    
    export function isPageReady(this: WrapReadyProperty<Vue>) {
        return this.pageIsReady
    }

## 2. 给事件回调函数和按钮Dom添加防抖与loading样式 ##

> 用于ts环境下的vue

通过装饰器包装被装饰的方法。要求被包装的方式是async/await的。这样装饰器内只需要用一个await就可以得知被包装的方法是否执行完成。同时，可以从事件对象中拿到被点击的dom元素并修改它。

/*
     * 请保证被包装的方法的参数列表最后一个是点击事件的参数
     */
    export default function buttonThrottle() {
        let pending = false;
        return function(target: any, name: string): any {
            const btnClickFunc = target[name];
            const newFunc = async function(this: Vue, ...params: any[]) {
                if (pending) {
                    return;
                }
                const event:Event = params[params.length - 1];
                let btn = event.target as HTMLElement
                pending = true;
                const recoverCursor = changeCursor(btn);
                try {
                    await btnClickFunc.apply(this, params);
                } catch (error) {
                    console.error(error);
                }
                recoverCursor();
                pending = false;
            };
            target[name] = newFunc;
            return target;
        };
    }
    function changeCursor(btn?: HTMLElement) {
        if (btn == null) {
            return () => {};
        }
        const oldCursor = btn.style.cursor;
        btn.style.cursor = "wait";
        return () => {
            btn.style.cursor = oldCursor;
        };
    }

用法: 在点击事件函数上使用这个装饰器。装饰器会自动检测该函数是否执行完成，并在执行过程中往按钮的Dom节点上添加point:wait属性

import { Component, Vue } from "vue-property-decorator";
        import buttonThrottle from "@/ui/view/utils/buttonThrottle";
    
        type Member = { account_no: string; name: string; warn?: string };
        @Component({ components: {} })
        export default class AddMemberInput extends Vue {        @buttonThrottle()
            private async confirmAdd() {
                await this.addMembers(this.getVaildMembers());
            }
        }

## 3. mounted之前显示白屏 ##

> 用于js的vue中包装vue的对象

同上，通过async/await获得mounted或者created是否执行完成 再通过指向vue实力的this拿到组件根节点，然后按需修改它 以下代码只是将组件隐藏了，实际上可以写更复杂的逻辑，在加载过程中显示其他内容，毕竟拿到了Dom，想干嘛就干嘛。

### 如果觉得这篇文章还不错    ###

点击下面卡片关注我

来个【分享、点赞、在看】三连支持一下吧![1452481a0119423a4b168fcc0734fe66.png][]

![850b9044d2b68011fb2777e92a686fa2.png][]

“分享、点赞、在看” 支持一波

[1452481a0119423a4b168fcc0734fe66.png]: /images/20221005/567800b3d432437d8ab068084d68d025.png
[850b9044d2b68011fb2777e92a686fa2.png]: /images/20221005/19c3bed6d7bf4ef3a76a6b934f4b081f.png