async/await 来处理异步/同步

说在前面的话

前面比较啰嗦，希望读者耐心看完。
async/await可以说是一个老生常谈，但是每一个前端工程师却又避不开的话题。
在JQuery一把梭的时代，如果遇到下面类似的需求，你要怎么做？
需求：拿到第一个ajax请求省，拿到省数据请求第二个ajax来获得市的数据，拿到市的数据再请求第三个ajax来获得区的数据。

最常见的写法莫过于两种：
1、回调地狱式写法：

$.ajax({
        url:'url1',
        type:'post',
        async: true,
        data:{
            list:0
        },
        success(province){
            $.ajax({
                url:'url2',
                type:'post',
                async: true,
                data:{
                    province:province
                },
                success(city){
                    $.ajax({
                        url:'url3',
                        type:'post',
                        async: true,
                        data:{
                            city:city
                        },
                        success(area){
                            console.log('终于拿到了区的数据')
                        }
                    })
                }
            })
        }
    })

简直令人发疯。

或者是这样？同步请求

 var province,city,area
    $.ajax({
        url:'url1',
        type:'post',
        async: false,
        data:{
            list:0
        },
        success(province){
            province = province
        }
    })
    $.ajax({
        url:'url2',
        type:'post',
        async: false,
        data:{
            province:province
        },
        success(city){
            city = city
        }
    })
    $.ajax({
        url:'url3',
        type:'post',
        async: false,
        data:{
            city:city
        },
        success(area){
            console.log('终于拿到了区的数据')
        }
    })

我靠，只要一个数据请求不回来页面就完犊子了。这简直是噩梦。

别笑，我相信身为前端工程师一定这么写过。

直到有一天，你发现vue里没有Jquery，只有基于promise写的axios.

一开始在使用axios的时候，还是脱离不了必须同步请求的变成思想，于是在vue项目中引入了jquery，把项目搞成了四不像。

研究了好久，终于发现了async/await

正文

async

async 词面翻译 “异步”。 async关键字一般放到function的前面，用来表示一个异步函数。如下

async function say() {
        return 'hi'
    }

根据阮一峰es6教程关于async部分的介绍，能得知async会返回一个Promise对象。所以我们可以通过then来调用。

    async function say() {
        return 'hi'
    }
    say().then(value => {
        console.log(value)
    })
    console.log('我在后面，但是我先执行')

如果不太明白，那我这么写你一定会明白：

    function say() {
        return new Promise(resolve => {
            resolve('hi')
        })
    }
    say().then(value => {
        console.log(value)
    })
    console.log('我在后面，但是我先执行')

await

词面意思“等待”，它只会在async函数体内出现，代表执行到这里的时候，等一下。它后面可以跟任何表达式，不过一般会跟一个Promise，可以实现异步函数同步调用的效果。

    function delay(time,message){
        return new Promise(resolve => {
            setTimeout(() => {
                resolve(message)
            },time)
        })
    }

    async function say() {
        let a = await delay(5000,'先执行')
        console.log(a)
        let b = await delay(4000,'后执行')
        console.log(b)
    }
    say()

delay是异步函数，在正常情况下，如果这样写：

    setTimeout(()=>{
        console.log('1')
    },5000)

    setTimeout(()=>{
        console.log('2')
    },4000)

会先输出2，然后1秒后再输出1.

但是在await的影响下，函数会先等待5秒后输出a，在等待4秒后输出b。

话题再转回到我们一开始说的ajax，使用async/await的方法来写，是不是感觉优雅多了？

在vue中，我们会使用axios来与后台做数据交互，axios没有同步请求，只有异步请求，所以我们可以使用async/await来模拟一个同步请求，实现功能。