async + await 是generator的語法糖,generator已經不直接用啦,因此你須要瞭解的,就是async + await !
(async + await = generator + co ,co庫,不瞭解的能夠去github看看了解下~ 幾行源碼)git
async 就是個promise, async函數能夠直接.then((data)=>{ })github
起步:promise
1. await必須結合async才能使用;異步
2. await後面能夠跟任何數據,也能夠跟同步方法或異步方法;async
例子1:函數
async function fn(){ console.log(0); await 1; console.log(1); await 2; console.log(2); await 3; console.log(3); return 4 } fn().then((data) => { console.log('data', data) }) // 打印: // 0 // 1 // 2 // 3 // data 4
進階:code
1. await後面跟着setTimeout等非promise寫的異步方法,那麼async後面的then函數(若then函數裏面是同步的), 則會先於await裏面的異步方法執行,且async函數中,await後面非promise寫的異步方法,若是是接口這種異步,則返回的時間不定,異步流仍然很差控制,看例子2就會發現,awiat函數不是按照書寫順序執行的。(強調!由於下面用了promise會發現另外一片天地!)接口
例子2:generator
async function fn(){ console.log(0); await setTimeout(() => {console.log(200)}, 200); console.log(1); await setTimeout(() => {console.log(100)}, 100); console.log(2); await setTimeout(() => {console.log(50)}, 50); console.log(3); return 'done' } fn().then((data) => { console.log('data', data) }) // 打印: // 0 // 1 // 2 // 3 // data done // 50 // 100 // 200
例子3: 在await 後面用了promise,會發現,異步流徹底可控了!!!同步
async function fn(){ console.log(0); let a = await new Promise((resolve) => { setTimeout(() => {resolve(200)}, 200) }) console.log(1); console.log('a', a); let b = await new Promise((resolve, reject) => { setTimeout(() => {resolve(a + 1)}, 100) }) console.log(2); console.log('b', b); let c = await new Promise((resolve, reject) => { setTimeout(() => {resolve(b + 1)}, 50) }) console.log(3); console.log('c', c); return c } fn().then((data) => { console.log('data', data) }) // 打印: // 0 // 1 // a 200 // 2 // b 201 // 3 // c 202 // data 202
總結:
async + await 是爲了讓書寫的異步流代碼可以像同步代碼同樣,方便控制而產生的。await只有放在async函數裏面才能使用,而且只有await後面跟着promise,纔可以真正起到控制異步流步驟的效果。