JS中的async await的用法和理解

2021-10-09 13:59:09 字數 1638 閱讀 9660

1、首先需要理解async 和 await的基本含義

async 是乙個修飾符,async 定義的函式會預設的返回乙個promise物件resolve的值,因此對async函式可以直接進行then操作,返回的值即為then方法的傳入函式

// 0. async基礎用法測試

async function fun0()

fun0().then( x => ) // 輸出結果 1, 1,

async function funa()

funa().then( x => ) // 輸出結果a, a,

async function funo() )

return {}

}funo().then( x => ) // 輸出結果 {} {}

async function funp() )

}funp().then( x => ) // 輸出promise promise

await 也是乙個修飾符,

await 關鍵字 只能放在 async 函式內部, await關鍵字的作用 就是獲取 promise中返回的內容, 獲取的是promise函式中resolve或者reject的值

// 如果await 後面並不是乙個promise的返回值,則會按照同步程式返回值處理

//  await 關鍵字 只能放在 async 函式內部, await關鍵字的作用 就是獲取 promise中返回的內容, 獲取的是promise函式中resolve或者reject的值

// 如果await 後面並不是乙個promise的返回值,則會按照同步程式返回值處理,為undefined

const bbb = function()

async function funasy() , 3000)

})const c = await bbb()

console.log(a, b, c)

}funasy() // 執行結果是 3秒鐘之後 ,輸出 1, time , string,

// 2.如果不使用promise的方法的話

function log2(time) , time)

}async function fun1()

fun1()

// 以上執行結果為: 立刻輸出undefined 立刻輸出1 2秒後輸出2000 5秒後輸出5000 10秒後輸出10000

2、那麼由此看來async / await的綜合用法如下

// 1.定義乙個或多個普通函式,函式必須返回promise物件,如果返回其他型別的資料,將按照普通同步程式處理

function log(time) , time)

})}async function fun()

fun()

// 3. async / await的重要應用 

const asy = function(x, time) , time)

})}const add = async function()

add();

// 5秒後輸出3 又10秒後輸出4 又15秒後輸出5 然後立刻輸出3,4,5,然後輸出12

JS中的async await的用法和理解

1 首先需要理解async 和 await的基本含義 async 是乙個修飾符,async 定義的函式會預設的返回乙個promise物件resolve的值,因此對async函式可以直接進行then操作,返回的值即為then方法的傳入函式 0.async基礎用法測試 async function fu...

JS中的async await的用法和理解

1 首先需要理解async 和 await的基本含義 async 是乙個修飾符,async 定義的函式會預設的返回乙個promise物件resolve的值,因此對async函式可以直接進行then操作,返回的值即為then方法的傳入函式 0.async基礎用法測試 async function fu...

JS中的async await的用法和理解

1 首先需要理解async 和 await的基本含義 async 是乙個修飾符,async 定義的函式會預設的返回乙個promise物件resolve的值,因此對async函式可以直接進行then操作,返回的值即為then方法的傳入函式 0.async基礎用法測試 async function fu...