依次執(zhí)行多項異步任務(wù)

有時候，我們希望批量執(zhí)行一組異步任務(wù)，但是不是 并行 ，而是依次執(zhí)行，這組任務(wù)是動態(tài)的，在一個數(shù)組里，當(dāng)然我們可以用 for 循環(huán)然后一個一個 await 執(zhí)行，但是還有另外一種方式：

JS Bin on jsbin.com

在上面的例子里，我們定義了一個 taskReducer：

async function taskReducer(promise, action){ let res = await promise; return action(res);}

這個 reducer 的兩個參數(shù)是 promise 和 action，promise 是代表當(dāng)前任務(wù)的 promise，而 action 是下一個要執(zhí)行的任務(wù)。我們可以 await 當(dāng)前 promise 執(zhí)行當(dāng)前任務(wù)，然后將執(zhí)行結(jié)果傳給下一個 action 就可以了。

這樣我們可以調(diào)用：

[task1, task2, task3, ...].reduce(taskReducer, init);

不管這些任務(wù)是同步還是異步都可以被 依次執(zhí)行 。需要注意的是，每一個任務(wù)的返回值將是下一個任務(wù)的輸入 promise 或者 value。

generator 與 async/await 一同使用

將上面的代碼進(jìn)一步擴(kuò)展，我們發(fā)現(xiàn)，它可以支持 generator 與 async/await 一同使用：

JS Bin on jsbin.com

在上面的例子里，我們定義了一個計時 tick 函數(shù)，我們通過 timing 來連續(xù)調(diào)用它，而 timing 是一個 generator，計時器顯然是異步函數(shù)，然而我們可以：

continuous(...timing(10))(0);

而這里的 continuous 其實就是前面的 reduce 的封裝。

使用 Proxy 實現(xiàn) PHP 中的常用“魔術(shù)方法”

PHP 中有 __get 、 __set 和 __call 三個強(qiáng)大的魔術(shù)方法，可以實現(xiàn)對不存在的屬性的讀寫和方法調(diào)用。在新的 ES 標(biāo)準(zhǔn)中添加了 Proxy 類，它可以構(gòu)造 Proxy 對象，用來“重載”對象的屬性和方法讀寫，從而實現(xiàn)類似于 PHP 的魔術(shù)方法：

JS Bin on jsbin.com

上面的例子里，我們在對象構(gòu)造的時候，分別“代理”對象實例的屬性 get 和 set 方法，如果對象上已存在某個屬性或方法，代理直接返回或操作該屬性。否則，判斷對象上是否有 __get 、 __set 或者 __call 方法，有的話，做相應(yīng)的處理。

這里我們使用裝飾器模式，定義了一個 Magical 裝飾器函數(shù)，讓它來處理希望使用 Magical 的類。

等到 ES Decorators 標(biāo)準(zhǔn)化了之后，我們就可以使用更加優(yōu)雅的寫法了：

@magicalclass Foo { __call(key, ...args){... }}

以上就是今天的所有內(nèi)容。ES 的新特性為我們提供了非常強(qiáng)大的功能，讓我們能夠更加優(yōu)雅地寫代碼。有任何問題，歡迎留言討論。

來自：https://www.h5jun.com/post/three-black-tech-in-modern-js.html