走過路過, async + await 瞭解一下

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,纔可以真正起到控制異步流步驟的效果。

相關文章
相關標籤/搜索