1. 程式人生 > >異步 callback vs promise vs async/await

異步 callback vs promise vs async/await

png tps cts .com settime src bubuko ID objects

1. callback

var fn1=function(){console.log("func1")}

var fn2=function(fn){
setTimeout(function(){
console.log("func2")
fn()      //不能寫fn,這只是函數名,要寫fn()才是觸發
},500)
}
var fn3=function(){console.log("func3")}

//函數名作為參數傳入fn2

fn1()
fn2(fn3)      //將函數名傳進去

2. promise

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise

技術分享圖片

技術分享圖片

技術分享圖片

var fn1=function(){console.log("func1")}

var fn2=function(){
return new Promise((resolve,reject)=>{
setTimeout(function(){
console.log("func2")
resolve()    
},500)
})
}
var fn3=function(){console.log("func3")}

//用then來管理先後次序
fn1()
fn2().then(()=>{fn3()})

3. async/await

用一個函數來安排次序,async/await出現在一個函數裏

var fn1=function(){console.log("func1")}

var fn2= function(){
return new Promise((resolve,reject)=>{
setTimeout(function(){
console.log("func2")
resolve()
},500)
})
}
var fn3=function(){console.log("func3")}

async function execFunc(){
fn1()
await fn2()
fn3()
}
execFunc()

異步 callback vs promise vs async/await