前端,如何更優雅的面對非同步

2022-05-14 04:27:10 字數 1193 閱讀 1569

本文是在闡述非同步程式設計思想,讓前端**更易於維護,看起來更優雅!不是講技術,但你若能耐心看完,一定會有收穫。

本文是不斷補充的,隨著開發實踐的越來越多,以及技術的不斷發展,**可以寫的越來越優雅!

用 promise 處理互動和非同步

前端開發經常會遇到這樣的場景:

當滿足一定條件時,需要彈出乙個模態框,以便接收使用者的輸入。然後根據不同的輸入,進行不用的操作。(ps:這類場景太常見了)

看了很多人的js**,我發現大多數人的設計是這樣的:

modalmodule, err =>);

}, err =>);

}, err =>);

}, err =>);

}關於loading的控制少了一處都不行,會導致loading一直存在:非同步處理,定義錯誤資訊,關閉loading,彈出提示,揉在一起,稍有疏忽漏掉乙個就報錯!

func2(resolve,reject), err =>);

}, err =>);

}, err =>);

}, err =>);

}func() ).then(()=>,msg=>);

}

可以func2 中四個非同步就是四個非同步處理+定義錯誤資訊,對於結束時的結果處理(處理只在乙個地方,不用匯出都是),在 func 中!

這段**易讀,易改,不易出錯! 

補充於:2023年12月8日18:20:44

現在看來上面的**寫的太糟糕了,先別說明明有了非同步,為啥還要用函式式呼叫,至少存在**地獄的問題!

es2017的 async await 和 es2015的promise鏈式呼叫 這兩個特性對於解決該問題,非常有效,瞬間讓你的**可讀性增強,非常優雅。請看修改: 

async function

func2() )

await createclass().

catch(() =>)

await createschedule().

catch(() =>)

await getlist().

catch(() =>)

}function

func() ).

catch(msg =>).

finally(() =>)

}

async 更優雅非同步體驗

function gen 然後,我們需要寫乙個啟動器來啟動這個函式。而採用 async 寫,則是 async function gen gen 直接執行即可直接執行了,無須寫生成器來執行了,而 僅僅是 改為async,yield改為await而已。所以本質上講 async 就是 generator ...

async 更優雅非同步體驗

function gen 然後,我們需要寫乙個啟動器來啟動這個函式。而採用 async 寫,則是 async function gen gen 直接執行即可直接執行了,無須寫生成器來執行了,而 僅僅是 改為async,yield改為await而已。所以本質上講 async 就是 generator ...

如何更優雅地切換Git分支

在日常開發中,我們經常需要在不同的 git 分支之間來回切換,特別是業務需求比較多的開發人員。在分支較多的情況下,分支名的 tab 自動補全會比較糟糕,切換時我們不免需要複製或手打分支名,那麼有沒有更優雅的方式了呢?為了提高切換 git 分支的效率,我用 golang 寫了git checkout ...