问题场景
vue中，我们像后台请求数据时，使用的是axios，由于请求是需要花费时间的的，而且这个时间还不少（http请求消耗的时间比较长），所以axios发起请求后会立马返回一个Promise对象，然后往下执行js语句。
在Promise对象中进行http请求，请求成功后在.then(callback)中能够拿到请求结果。
let user
console.log('请求前的代码')
this.$http.post('/api/user/get', {Id: '00001'}).then((res) => {
user = res
console.log('请求结果：' + res)
})
console.log('请求后的代码，请求结果：' + user)
以上代码，假设获取用户信息需要1s，远大于其他js代码的执行时间，那么最终输出顺序是什么？
请求前的代码
请求后的代码，请求结果：undefined
请求结果：{"Id": "00001", .... }
没错，程序会先执行js代码，而变量赋值在请求成功后，所以我们无法保证在请求外能够拿到请求结果。这是异步非常容易产生的问题。
如果我们的业务逻辑需要请求多个数据，并且后一个请求依赖于前一个请求的结果，这时候我们更不能保证数据获取顺序，因此我们需要将异步请求改成同步，以保证业务逻辑的正确性。
async 与 await
async 意为：异步的，其放在我们所定义的function名前，如：
async getUser() {}
其声明这个函数为一个异步执行的，也就是说 我们调用这个方法时，其返回就是一个Promise对象，显然axios的请求方法，就是通过这个关键字来实现异步的。他的好处就是让程序快速执行，避免用户等待页面加载的时间过长，当然现在我们不想讨论他的优点，他的缺点就是我们现在遇到的问题，我们想要拿到数据再执行下一行代码。
await 意为等待，显然 异步执行的方法，能够通过这个关键字，等待请求结果，实现将异步执行的方法变成同步的。
好了，问题解决，只要在请求时加上await就可以了！
console.log('请求前的代码')
let user = await this.$http.post('/api/user/get', {Id: '00001'})
console.log('请求后的代码，请求结果：' + user)
结果输出：
请求前的代码
请求后的代码，请求结果：{"Id": "00001", .... }
是的，结果确实是正确的，但还有一个规则还没有讲，那就是 async 与 await 必须同时出现 所以我们的代码实际是这样：
asycn getUser() {
// ... 其他代码
console.log('请求前的代码')
let user = await this.$http.post('/api/user/get', {Id: '00001'})
console.log('请求后的代码，请求结果：' + user)
// ... 其他代码
}
如果有多个请求需要同步：
asycn getUser() {
// ... 其他代码
console.log('请求前的代码')
let user1 = await this.$http.post('/api/user/get', {Id: '00001'})
console.log('请求后的代码，请求结果：' + user1)
let user2 = await this.$http.post('/api/user/get', {Id: '00002'})
console.log('请求后的代码，请求结果：' + user2)
let user3 = await this.$http.post('/api/user/get', {Id: '00003'})
console.log('请求后的代码，请求结果：' + user3)
// ... 其他代码
return [user1, user2, user3] // 假设返回一个数组
}
如果还要嵌套一层
asycn getUser(){
...
},
async getDep(users) {
let dep1 = await this.$http.post('/api/dep/get', {Id: users[0].DepId})
let dep2 = await this.$http.post('/api/dep/get', {Id: users[1].DepId})
let dep3 = await this.$http.post('/api/dep/get', {Id: users[2].DepId})
return [dep1, dep2, dep3]
},
async getData() {
let users = await getUser()
let deps = await getDep(users)
// ... 其他代码
}
Vue中使用
vue项目中，需要使用到同步的，通常也只有页面渲染时的数据初始化。
我们可以定义一个异步方法，将需要同步的请求都放到其中执行
export default {
mouted () {
this.initData()
},
methods: {
async initData() {
let users = await getUsers()
await getDeps(users)
},
async getUsers() {
...
},
async getDeps(user) {
...
},
// ...
}
}
钩子mouted由于不能使用await，所以需要定义一个异步的initData()方法进行数据的初始化。
我可能啥都不会，希望朋友点评......
