Async/await加上裝飾器，會產生神奇的效果。
以下所列幾個裝飾器，都要求被裝飾的方法寫成async/await，
這樣就可以利用async/await本身的特性，從方法外部得知異步方法是否運行完成。
於是便實現了將繁雜和麻煩的邏輯隱藏在裝飾器內部，使業務代碼更加乾淨。
以下裝飾器除了最後一個都是用在Typescript環境下的class寫法的vue裏的。
最後一個其實並不是裝飾器，而是一個高階函數，但是衆所周知，裝飾器本質上就是個高階函數。
所以所有裝飾器都可以很容易的改成高階函數，然後用在js環境的vue裏。
給vue添加一個指示初始化完成的變量。
-
使用場景舉例：
搜索頁面：搜索中顯示loading，結果爲空時顯示暫無數據。
第一次打開頁面時，在created或者mounted中發出請求，進行初始化的搜索，此時搜索還沒完成，顯示暫無數據並不合適。
這個時候就需要一個變量來判斷頁面是不是第一次打開。 -
代碼解釋：
通過裝飾器添加這個屬性（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樣式
-
使用場景舉例：
點擊一個按鈕，觸發一個函數，併發出一個請求。此時需要給這個函數防抖，並給按鈕增加一個loading的樣式
-
代碼解釋
利用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;
};
}
-
用法:
在點擊事件函數上使用這個裝飾器.
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變量
-
場景
發請求時在頁面上加一個loading的狀態，比如element-ui裏就有一個v-loading的指令。
這個指令需要一個是否在loading中的變量
-
代碼解釋
往組件上增加一個變量，變量名由參數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之前顯示白屏
-
場景
頁面加載的過程很醜，所以可以在mouted之前顯示白屏，或者弄一個骨架屏。
特別是在微信小程序中，因爲加載完成之前特別醜，所以幾乎所有小程序都會在mounted之前白屏。
-
通過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;
}
關於本文
來源：OLong
https://segmentfault.com/a/1190000037604556
本文分享自微信公衆號 - 前端自習課（FE-study）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。