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

async/await

??最近公司面試，發(fā)現(xiàn)有個別的朋友搞不明白 async , await ，甚至以為這個東西是 es6 的，雖然它和 es6 的 promise 確實有血緣關系，但這個東西確實是 es7 的。好了，廢話不多說，讓我們今天徹底看看這個玩意是什么吧。

async

??async 其實字面好理解 異步，await從字面意思也好理解，等待。所以看出來他們相輔相成，所以 await 只能出現(xiàn)在 async 函數(shù)中。 讓我們來寫段代碼看看

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

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

??我們看出來async返回的是一個 promise 對象，不太熟悉 promise 對象的童鞋，請看 上一篇文章 ，那既然是個promise對象，我們的所有promise的方法是不是可以調(diào)用了。讓我來看一下。

async function test(){
    return '我被觸發(fā)了';
};

test().then((val)=>{ console.log(val) }) //我被觸發(fā)了

竟然他return一個值那，又是promise對象，那我們是不是可以理解為就是 promise.resolve() 呢，讓我們來改寫一下：

    const promise = new Promise((resolve)=>{
        resolve('我被觸發(fā)了')
    });
    promise.then((val)=>{
        console.log(val) //我被觸發(fā)了。
    });

好的，沒毛病。** 在沒有 await 的情況下執(zhí)行 async 函數(shù)，它會立即執(zhí)行，返回一個 Promise 對象，并且，絕不會阻塞后面的語句。這和普通返回 Promise 對象的函數(shù)沒區(qū)別 **

await

??好了我們。大概知道了 async 的寫法，那么我們來看看 await 。之前說到 await 只能出現(xiàn)在 async 的方法中，那我們來看看不出現(xiàn)會怎么樣？

    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調(diào)用外部的promise也沒問題，結(jié)合之前的，我們是不是可以這樣寫：

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

兩者結(jié)合

??我們已經(jīng)在上面引出了兩者結(jié)合，但是anysc顧名思義，異步，好我們看看兩者結(jié)合怎么來處理異步問題吧。

    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呢？原因很簡單，多個鏈式調(diào)用。
例如我們有這樣的需求：

    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();
    

是不是更加靈活了？數(shù)據(jù)的解耦非常舒服，所以一個東西得誕生一定有原因的。

結(jié)語

關于 async ， await 暫時說到這里。困了，好累啊。。。睡了晚安各位