web前端中的async/await用处你知道？

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

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

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

下面和爱创乐育小编一起来，看一下吧！！！

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

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

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

import { Constructor } from"vue/types/options";

export type WrapReadyProperty = T & { pageIsReady?: boolean }

/**

• 在@compontent 之后使用这个装饰器，

• 组件就会被注入属性 pageIsReady，

• 当created和mounted都执行完成时 pageIsReady 变成true，

• 要求mounted或created是async/await。(取决于在哪个方法中发请求初始化组件)

• 然后可以在template中直接使用。

• 在script中使用调用isPageReady.call(this)方法；

*/

exportdefaultfunct