【总结】活用 async/await ,实现一些让Vue更好用的装饰器

发表于 2年以前  | 总阅读数:824 次

Async/await加上装饰器,会产生神奇的效果。

以下所列几个装饰器,都要求被装饰的方法写成async/await,

这样就可以利用async/await本身的特性,从方法外部得知异步方法是否运行完成。

于是便实现了将繁杂和麻烦的逻辑隐藏在装饰器内部,使业务代码更加干净。

以下装饰器除了最后一个都是用在Typescript环境下的class写法的vue里的。

最后一个其实并不是装饰器,而是一个高阶函数,但是众所周知,装饰器本质上就是个高阶函数。

所以所有装饰器都可以很容易的改成高阶函数,然后用在js环境的vue里。

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

  1. 使用场景举例:

搜索页面:搜索中显示loading,结果为空时显示暂无数据。

第一次打开页面时,在created或者mounted中发出请求,进行初始化的搜索,此时搜索还没完成,显示暂无数据并不合适。 这个时候就需要一个变量来判断页面是不是第一次打开。

2 . 代码解释:

通过装饰器添加这个属性(pageIsReady)到组件的类上,

并包装vue的created, mounted和beforeDestroy方法,监控组件的生命周期。 当created或者mounted里发出的请求完成后,就把pageIsReady设为true。 然后在beforeDestroy中重置状态,因为装饰器用了闭包,只会实例化一次。

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

export function isPageReady(this: WrapReadyProperty<Vue>) {
    return this.pageIsReady
} 

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

  1. 使用场景举例:

点击一个按钮,触发一个函数,并发出一个请求。此时需要给这个函数防抖,并给按钮增加一个loading的样式

2 . 代码解释

利用async/await把异步变成同步的特性,在装饰器中发现方法还没执行完成时直接返回。

并从时间对象中拿到按钮的dom节点,改变按钮的样式。我这里是用了一个cursor:wait;

/*
 * 请保证被包装的方法的参数列表最后一个是点击事件的参数
 */
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;
    };
} 
  1. 用法: 在点击事件函数上使用这个装饰器.
 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());
        }    
    }

注入loading变量

  1. 场景

发请求时在页面上加一个loading的状态,比如element-ui里就有一个v-loading的指令。

这个指令需要一个是否在loading中的变量

2 . 代码解释

往组件上增加一个变量,变量名由参数variableName指定

该变量会在被包装的方法执行期间为true

这样就不用自己写this.loading=true this.loading=false了

export default function FunctionLoadingVariable(variableName: string) {
       return function(target: any, name: string): any {
           target[variableName] = false;
           const btnClickFunc = target[name];
           const newFunc = async function(this: Vue & {
               [key: string]: boolean
           }, ...params: any[]) {
               try {
                   this[variableName] = true
                   await btnClickFunc.apply(this, params);
               } catch (error) {
                   console.error(error);
               }
               this[variableName] = false
           };
           target[name] = newFunc;
           return target;
       };
   } 

mounted之前显示白屏

  1. 场景

页面加载的过程很丑,所以可以在mouted之前显示白屏,或者弄一个骨架屏。

特别是在微信小程序中,因为加载完成之前特别丑,所以几乎所有小程序都会在mounted之前白屏。

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

 function firstPaintControl(vueObj) {
    let oldMounted = vueObj.mounted || function() {};
    vueObj.mounted = async function(...params) {
      this.$el.style.visibility = 'hidden';
      await oldMounted.apply(this, params);
      this.$el.style.visibility = 'visible';
    };
    return vueObj;
  }

本文由哈喽比特于2年以前收录,如有侵权请联系我们。
文章来源:https://mp.weixin.qq.com/s/KMqQneT-tVxoNkIlyWzQFA

 相关推荐

刘强东夫妇:“移民美国”传言被驳斥

京东创始人刘强东和其妻子章泽天最近成为了互联网舆论关注的焦点。有关他们“移民美国”和在美国购买豪宅的传言在互联网上广泛传播。然而,京东官方通过微博发言人发布的消息澄清了这些传言,称这些言论纯属虚假信息和蓄意捏造。

发布于:6月以前  |  808次阅读  |  详细内容 »

博主曝三大运营商,将集体采购百万台华为Mate60系列

日前,据博主“@超能数码君老周”爆料,国内三大运营商中国移动、中国电信和中国联通预计将集体采购百万台规模的华为Mate60系列手机。

发布于:6月以前  |  770次阅读  |  详细内容 »

ASML CEO警告:出口管制不是可行做法,不要“逼迫中国大陆创新”

据报道,荷兰半导体设备公司ASML正看到美国对华遏制政策的负面影响。阿斯麦(ASML)CEO彼得·温宁克在一档电视节目中分享了他对中国大陆问题以及该公司面临的出口管制和保护主义的看法。彼得曾在多个场合表达了他对出口管制以及中荷经济关系的担忧。

发布于:6月以前  |  756次阅读  |  详细内容 »

抖音中长视频App青桃更名抖音精选,字节再发力对抗B站

今年早些时候,抖音悄然上线了一款名为“青桃”的 App,Slogan 为“看见你的热爱”,根据应用介绍可知,“青桃”是一个属于年轻人的兴趣知识视频平台,由抖音官方出品的中长视频关联版本,整体风格有些类似B站。

发布于:6月以前  |  648次阅读  |  详细内容 »

威马CDO:中国每百户家庭仅17户有车

日前,威马汽车首席数据官梅松林转发了一份“世界各国地区拥车率排行榜”,同时,他发文表示:中国汽车普及率低于非洲国家尼日利亚,每百户家庭仅17户有车。意大利世界排名第一,每十户中九户有车。

发布于:6月以前  |  589次阅读  |  详细内容 »

研究发现维生素 C 等抗氧化剂会刺激癌症生长和转移

近日,一项新的研究发现,维生素 C 和 E 等抗氧化剂会激活一种机制,刺激癌症肿瘤中新血管的生长,帮助它们生长和扩散。

发布于:6月以前  |  449次阅读  |  详细内容 »

苹果据称正引入3D打印技术,用以生产智能手表的钢质底盘

据媒体援引消息人士报道,苹果公司正在测试使用3D打印技术来生产其智能手表的钢质底盘。消息传出后,3D系统一度大涨超10%,不过截至周三收盘,该股涨幅回落至2%以内。

发布于:6月以前  |  446次阅读  |  详细内容 »

千万级抖音网红秀才账号被封禁

9月2日,坐拥千万粉丝的网红主播“秀才”账号被封禁,在社交媒体平台上引发热议。平台相关负责人表示,“秀才”账号违反平台相关规定,已封禁。据知情人士透露,秀才近期被举报存在违法行为,这可能是他被封禁的部分原因。据悉,“秀才”年龄39岁,是安徽省亳州市蒙城县人,抖音网红,粉丝数量超1200万。他曾被称为“中老年...

发布于:6月以前  |  445次阅读  |  详细内容 »

亚马逊股东起诉公司和贝索斯,称其在购买卫星发射服务时忽视了 SpaceX

9月3日消息,亚马逊的一些股东,包括持有该公司股票的一家养老基金,日前对亚马逊、其创始人贝索斯和其董事会提起诉讼,指控他们在为 Project Kuiper 卫星星座项目购买发射服务时“违反了信义义务”。

发布于:6月以前  |  444次阅读  |  详细内容 »

苹果上线AppsbyApple网站,以推广自家应用程序

据消息,为推广自家应用,苹果现推出了一个名为“Apps by Apple”的网站,展示了苹果为旗下产品(如 iPhone、iPad、Apple Watch、Mac 和 Apple TV)开发的各种应用程序。

发布于:6月以前  |  442次阅读  |  详细内容 »

特斯拉美国降价引发投资者不满:“这是短期麻醉剂”

特斯拉本周在美国大幅下调Model S和X售价,引发了该公司一些最坚定支持者的不满。知名特斯拉多头、未来基金(Future Fund)管理合伙人加里·布莱克发帖称,降价是一种“短期麻醉剂”,会让潜在客户等待进一步降价。

发布于:6月以前  |  441次阅读  |  详细内容 »

光刻机巨头阿斯麦:拿到许可,继续对华出口

据外媒9月2日报道,荷兰半导体设备制造商阿斯麦称,尽管荷兰政府颁布的半导体设备出口管制新规9月正式生效,但该公司已获得在2023年底以前向中国运送受限制芯片制造机器的许可。

发布于:6月以前  |  437次阅读  |  详细内容 »

马斯克与库克首次隔空合作:为苹果提供卫星服务

近日,根据美国证券交易委员会的文件显示,苹果卫星服务提供商 Globalstar 近期向马斯克旗下的 SpaceX 支付 6400 万美元(约 4.65 亿元人民币)。用于在 2023-2025 年期间,发射卫星,进一步扩展苹果 iPhone 系列的 SOS 卫星服务。

发布于:6月以前  |  430次阅读  |  详细内容 »

𝕏(推特)调整隐私政策,可拿用户发布的信息训练 AI 模型

据报道,马斯克旗下社交平台𝕏(推特)日前调整了隐私政策,允许 𝕏 使用用户发布的信息来训练其人工智能(AI)模型。新的隐私政策将于 9 月 29 日生效。新政策规定,𝕏可能会使用所收集到的平台信息和公开可用的信息,来帮助训练 𝕏 的机器学习或人工智能模型。

发布于:6月以前  |  428次阅读  |  详细内容 »

荣耀CEO谈华为手机回归:替老同事们高兴,对行业也是好事

9月2日,荣耀CEO赵明在采访中谈及华为手机回归时表示,替老同事们高兴,觉得手机行业,由于华为的回归,让竞争充满了更多的可能性和更多的魅力,对行业来说也是件好事。

发布于:6月以前  |  423次阅读  |  详细内容 »

AI操控无人机能力超越人类冠军

《自然》30日发表的一篇论文报道了一个名为Swift的人工智能(AI)系统,该系统驾驶无人机的能力可在真实世界中一对一冠军赛里战胜人类对手。

发布于:6月以前  |  423次阅读  |  详细内容 »

AI生成的蘑菇科普书存在可致命错误

近日,非营利组织纽约真菌学会(NYMS)发出警告,表示亚马逊为代表的电商平台上,充斥着各种AI生成的蘑菇觅食科普书籍,其中存在诸多错误。

发布于:6月以前  |  420次阅读  |  详细内容 »

社交媒体平台𝕏计划收集用户生物识别数据与工作教育经历

社交媒体平台𝕏(原推特)新隐私政策提到:“在您同意的情况下,我们可能出于安全、安保和身份识别目的收集和使用您的生物识别信息。”

发布于:6月以前  |  411次阅读  |  详细内容 »

国产扫地机器人热销欧洲,国产割草机器人抢占欧洲草坪

2023年德国柏林消费电子展上,各大企业都带来了最新的理念和产品,而高端化、本土化的中国产品正在不断吸引欧洲等国际市场的目光。

发布于:6月以前  |  406次阅读  |  详细内容 »

罗永浩吐槽iPhone15和14不会有区别,除了序列号变了

罗永浩日前在直播中吐槽苹果即将推出的 iPhone 新品,具体内容为:“以我对我‘子公司’的了解,我认为 iPhone 15 跟 iPhone 14 不会有什么区别的,除了序(列)号变了,这个‘不要脸’的东西,这个‘臭厨子’。

发布于:6月以前  |  398次阅读  |  详细内容 »
 目录