淺談async/await

劉珍寶0505發表於2020-06-21
AI

async

背景意義

眾多周知，Promise的出現使用then鏈有效的解決了原有回撥地獄的問題，現在async/await是對Promise的進一步優化,使非同步程式碼維護起來更像是同步操作

async

  • 可以理解為是Generator 函式的語法糖
  • async函式返回一個Promise物件，所以可以在async函式呼叫後面使用.then()新增回撥函式；
  • 如果async函式中return的是一個基本型別，會被Promise.resolve()函式進行包裝成一個Promise物件，基本型別的值將作為resolve()的引數進行傳遞
async function test(){
	return 20
}
test().then((data)=>{
    console.log(data) //20
})
複製程式碼

async返回基本型別時，會被包裝成Promise對形象

  • 如果async函式中沒有顯式return，則會return一個沒有引數的Promise物件
async function test(){
	console.log('print async') //print async
}
test().then((data)=>{
    console.log('enter...') //enter...
    console.log(data) //undefied
})
複製程式碼

以上說明async函式沒有顯式return時，會預設return一個不帶任何引數的Promise物件

await

  • await只能在async函式中使用
  • await當接收一個Promise物件時，會等待Promise返回的結果，回撥的resolve函式引數作為 await 表示式的值，async後面的程式碼也會一直等待
function f1(){
    return new Promise((resolve,reject)=>{
        resolve(20)
    })}
async function f2(){
    let num = await f1()
    console.log('num',num) //num 20
}
f2()
複製程式碼
  • await當接收一個基本型別值時，await沒有任何作用
async function test(){
	let a = await 20
	console.log('a',a) //a 20
}
test()
複製程式碼
  • 任何一個await語句後面的 Promise 物件變為reject狀態，那麼整個async函式都會中斷執行
async function f() {
  await Promise.reject('出錯了');
  await Promise.resolve('hello world'); // 不會執行
}
f().then((data)=>{
        console.log(data)
    })
    .catch((err)=>{
        console.log(err) //出錯了
    })
複製程式碼

相關文章