Vue使用async、await、promise解决异步

昨天在做公司Vue项目时遇到了异步问题，正好是需要使用到async、await、promise这三个关键字。这里我简单的描述下问题：
页面需要在页面初始化的时候先请求接口获取地区码，在使用地区码继续请求获取列表数据。（要求不能使用套娃的方式请求）

问题代码重现

 created(){
        this.getAreaCode()  //获取地区码
        this.getListData()  //获取列表
    },
    methods:{
        getAreaCode(){
            setTimeout(() => {
                console.log('获取到地区码')
            }, 5000);
        },
       getListData(){
            setTimeout(() => {
                console.log('根据地区码，获取到列表')
            }, 1000);
       }
    }
    执行结果:
		    根据地区码，获取到列表
		    获取到地区码

由于获取地区码的接口请求太久，就会出现地区码还没回来就请求获取列表 ，这明显会出现问题。之所以出现这个问题，要还是异步操作造成的，下面列出两种方式来解决。

套娃方式解决

   created(){
        this.getAreaCode()  //获取地区码
    },
    methods:{
        getAreaCode(){
            setTimeout(() => {
                console.log('获取到地区码')
                this.getListData();
            }, 5000);
        },
       getListData(){
            setTimeout(() => {
                console.log('根据地区码，获取到列表')
            }, 1000);
       }
    }
    执行结果:
			获取到地区码
			根据地区码，获取到列表

使用async、await、promise解决异步

	async created(){
       let promise= await this.getAreaCode()  //获取地区码
       console.log(promist);
       this.getListData()  //获取列表
    },
    methods:{
        getAreaCode(){
            return new Promise((resolve,reject)=>{
            setTimeout(() => {
                console.log('获取到地区码')
                //模拟返回的code码
                let code = [
                    859991,1549665
                ]
                //模拟成功
                resolve(code)
            }, 5000);
            })
        },
       getListData(){
            setTimeout(() => {
                console.log('根据地区码，获取到列表')
            }, 1000);
       }
    }
    执行结果:
		    获取到地区码
			[859991, 1549665]
			根据地区码，获取到列表

使用async、await之后将会一直等待getAreaCode()方法请求回来之后，才会去执行getListData()方法获取列表。有一点需要注意的是await 后面跟着的方法返回必须是Promise类型。