美文网首页
走过路过, async + await 了解一下

走过路过, async + await 了解一下

作者: kup | 来源:发表于2018-11-14 16:49 被阅读0次

    async + await 是generator的语法糖,generator已经不直接用啦,所以你需要了解的,就是async + await !
    (async + await = generator + co ,co库,不了解的可以去github看看了解下~ 几行源码)

    async 就是个promise, async函数可以直接.then((data)=>{ })

    起步:

    1. await必须结合async才能使用;

    2. await后面可以跟任何数据,也可以跟同步方法或异步方法;

    例子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
    

    进阶:

    1. await后面跟着setTimeout等非promise写的异步方法,那么async后面的then函数(若then函数里面是同步的), 则会先于await里面的异步方法执行,且async函数中,await后面非promise写的异步方法,如果是接口这种异步,则返回的时间不定,异步流仍然不好控制,看例子2就会发现,awiat函数不是按照书写顺序执行的。(强调!因为下面用了promise会发现另一片天地!)

    例子2:

    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,才能够真正起到控制异步流步骤的效果。

    相关文章

      网友评论

          本文标题:走过路过, async + await 了解一下

          本文链接:https://www.haomeiwen.com/subject/absjaftx.html