----欢迎查看我的博客----

async/await

  最近公司面试，发现有个别的朋友搞不明白 async , await ，甚至以为这个东西是 es6 的，虽然它和 es6 的 promise 确实有血缘关系，但这个东西确实是 es7 的。好了，废话不多说，让我们今天彻底看看这个玩意是什么吧。

async

  async 其实字面好理解 异步，await从字面意思也好理解，等待。所以看出来他们相辅相成，所以 await 只能出现在 async 函数中。 让我们来写段代码看看

async function asyncTest(){
    return 'hello';
};

console.log(asyncTest()); //Promise {<resolved>: "hello"}

  我们看出来async返回的是一个 promise 对象，不太熟悉 promise 对象的童鞋，请看 上一篇文章 ，那既然是个promise对象，我们的所有promise的方法是不是可以调用了。让我来看一下。

async function test(){
    return '我被触发了';
};

test().then((val)=>{ console.log(val) }) //我被触发了

竟然他return一个值那，又是promise对象，那我们是不是可以理解为就是 promise.resolve() 呢，让我们来改写一下：

    const promise = new Promise((resolve)=>{
        resolve('我被触发了')
    });
    promise.then((val)=>{
        console.log(val) //我被触发了。
    });

好的，没毛病。** 在没有 await 的情况下执行 async 函数，它会立即执行，返回一个 Promise 对象，并且，绝不会阻塞后面的语句。这和普通返回 Promise 对象的函数没区别 **

await

  好了我们。大概知道了 async 的写法，那么我们来看看 await 。之前说到 await 只能出现在 async 的方法中，那我们来看看不出现会怎么样？

    function test(){
        return 1
    };
    
    function result(){
        const val = await test()
        console.log(val) //await is only valid in async function
    }
    result();

很明显报错了。再次验证 await 只能用在 async 的方法中。
改：

    function test(){
        return 1
    };
    
    async function result(){
        const val = await test()
        console.log(val) //1
    }
    result();

我们在来做些改变：

    function test(){
        return Promise.resolve(1)
    };
    
    async function result(){
        const val = await test()
        console.log(val) //1
    }
    result();

看来我们await调用外部的promise也没问题，结合之前的，我们是不是可以这样写：

    async function test(){
        return 1
    };
    async function result (){
        const val = await test();
        console.log(val) //1
    }
    result()

两者结合

  我们已经在上面引出了两者结合，但是anysc顾名思义，异步，好我们看看两者结合怎么来处理异步问题吧。

    function test(){
        return new Promise((resolve)=>{
            setTimeout(()=>{
                resolve('我出来了')
            },1000)
        })
    };
    
    async function result(){
        const val = await test();
        console.log(val) //我出来了
    };
    result();

我们可以看出，test返回一个promise的对象，然后result里的await拿到了这个值。我们看看如果用.then怎么写吧

    function test(){
        return new Promise((resolve)=>{
            setTimeout(()=>{
                resolve('我出来了')
            },1000)
        })
    }
    
    test().then((val)=>{
        console.log(val) //我出来了
    })

那既然.then可以解决问题那么问啥要用async和await呢？原因很简单，多个链式调用。
例如我们有这样的需求：

    function test1(val){
        return new Promise((resolve)=>{
            setTimeout(()=>{
                resolve(val + 1)
            },1000)
        })
    }
    function test2(val){
        return new Promise((resolve)=>{
            setTimeout(()=>{
                resolve(val + 1)
            },1000)
        })
    }
    function test3(val){
        return new Promise((resolve)=>{
            setTimeout(()=>{
                resolve(val + 1)
            },1000)
        })
    }
    
    function doit(){
        test1(1)
        .then((v)=>test2(v))
        .then((v)=>test3(v))
        .then((v)=>{console.log(v)}) //4
    }
    doit()

.then.then.then看着繁琐且不易维护。我们来看看用新武器怎么解决的吧

    function test1(val){
        return new Promise((resolve)=>{
            setTimeout(()=>{
                resolve(val + 1)
            },1000)
        })
    }
    function test2(val){
        return new Promise((resolve)=>{
            setTimeout(()=>{
                resolve(val + 1)
            },1000)
        })
    }
    function test3(val){
        return new Promise((resolve)=>{
            setTimeout(()=>{
                resolve(val + 1)
            },1000)
        })
    }
    
    async function doit(){
        const v1 = await test1(1);
        const v2 = await test2(v1);
        const v3 = await test2(v2);
        console.log(v3) //4
    }
    
    doit();
    

是不是更加灵活了？数据的解耦非常舒服，所以一个东西得诞生一定有原因的。

结语

关于 async ， await 暂时说到这里。困了，好累啊。。。睡了晚安各位