js之async, await實用技巧

2021-08-26 02:59:03 字數 1513 閱讀 4051

同步變異步

看到這有人就奇怪了,好好的同步**為啥要變異步?

其實我也不想,這有可能是為了後續的擴充套件。

比如如下場景:有個判斷使用者登入的方法islogin, 我們可以在首次進入頁面時將登入資訊儲存起來, 比如使用localstorage, 這樣就可以用locastorage.getitem('islogin')來取得登入資訊然後判斷:

function

islogin

()

上面的**看起來很好,其實也沒啥大問題。不過當你多個地方都呼叫了它, 然後出現了如下需求: 登入狀態的判斷還要看另外乙個狀態(這個例子可能不太恰當,理解意思就好), 而這個狀態需要通用調介面獲取, 然後**可能會是這樣:

function

isloginasync

() // 到這來說明:localstorage.getitem('islogin') == 1

// 然後進行另乙個狀態的判斷

return

new promise(function

(resolve, reject) );

});}// 之前呼叫isloginsync的位置可能會做出如下修改:

// function servicefunc()

// ...

async function

servicefunc

() // ...

有人會說, 這改起來也沒啥,不難改。額, 確實不難, 不過可能真的呼叫的地方很多,怕改錯。 而且如果只能用promise呢,不能用async/await呢?那改起來就麻煩了。

await 同步**會立即返回

function

add(a, b)

function

addasync

(a, b) , 1000);

});}async function

f1()

f1();

// 輸出:

// addasync start: 1535375446468

// addasync end: 1535375447470

// s1=3

// add start: 1535375447470

// add end: 1535375447470

// s2=7

f1();

從輸出可以看到, 同步和非同步加法在使用await如果,除了時間(非同步等待)外,效果沒什麼差別。 這也就是說, 如果考慮到擴充套件,可以一開始就用非同步的寫法,避免後面改動過大。

序列promise

function

resolve

(...args) , 200);

});}async function

test

() }

// 依次輸出: 0, 1, 4, 16, ... 81

test();

歡迎補充指正!

js實用方法

判斷型別 千位符const milliformat num num num.tostring replace d g,m m.replace d g,深度轉殖 function deepclone obj var o isarray obj for i in obj return o 解析get請求...

JS繼承(實用)

前言 js繼承常規共有6種方法,分別 1.原型鏈繼承 2.建構函式繼承 3.組合繼承 原型鏈繼承 建構函式繼承 4.原型式繼承 5.寄生式繼承 6.寄生組合式繼承 但是真正能使用的只有3和6兩種繼承而已,應為其他的繼承方式都不是完整的繼承多會有或多或少的欠缺,接下來就為大家講解各個繼承的詳解 首先我...

實用js片段

演算法 加法 add 10,2 12 function add a,b catch f try catch f return e math.pow 10,math.max c,d mul a,e mul b,e e 減法 sub 10,2 8 function sub a,b catch f try...