async/await场景:
这是一个用同步的思维来解决异步问题的方案,当前端接口调用需要等到接口返回值以后渲染页面时。
async
async的用法,它作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思, 异步函数也就意味着该函数的执行不会阻塞后面代码的执行,async 函数返回的是一个promise 对象,可以使用then方法添加回调函数。当函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。
await
await的含义为等待。意思就是代码需要等待await后面的函数运行完并且有了返回结果之后,才继续执行下面的代码。这正是同步的效果。
简单案例:
async function timeout) { return 'hello world' } console.logtimeout)); console.log'虽然在后面,但是我先执行');
原来async 函数返回的是一个promise 对象,如果要获取到promise 返回值,我们应该用then 方法, 继续修改代码:
async function timeout) { return 'hello world' } timeout).thenresult => { console.logresult); }) console.log'虽然在后面,但是我先执行');
我们获取到了”hello world’, 同时timeout 的执行也没有阻塞后面代码的执行,和 我们刚才说的一致。
await 是等待的意思,那么它等待什么呢,它后面跟着什么呢?其实它后面可以放任何表达式,不过我们更多的是放一个返回promise 对象的表达式。
注意 await 关键字只能放到async 函数里面
例子:现在写一个函数,让它返回promise 对象,该函数的作用是2s 之后让数值乘以2:
// 2s 之后返回双倍的值 function doubleAfter2secondsnum) { return new Promiseresolve, reject) => { setTimeout) => { resolve2 * num) }, 2000); } ) }
就这一个函数,我们可能看不出async/await 的作用,如果我们要计算3个数的值,然后把得到的值进行输出呢?
async function testResult) { let first = await doubleAfter2seconds30); let second = await doubleAfter2seconds50); let third = await doubleAfter2seconds30); console.logfirst + second + third); // 220 }
现在调用testResult 函数,6秒后,控制台输出220, 我们可以看到,写异步代码就像写同步代码一样了,再也没有回调地域了。
Vue项目案例
async getTopicList) { let resp = await axios.get`/topic`) if resp.data.status === 1) { this.topicList = resp.data.data.data } }
按顺序执行函数:
async created) { await this.province) await this.city) await this.country) }
上面会按顺序执行:省 市 县
实例:
data) { return { topicList: [] } }, created) { this.getTopicList) console.logthis.topicList) }, methods: { async getTopicList) { let resp = await axios.get`/topic`) if resp.data.status === 1) { this.topicList = resp.data.data.data } } }
可以看到打印出来的是空数组。因为这时候调用接口返回的数据还没有被赋值。
修改下:
data) { return { topicList: [] } }, async created) { await this.getTopicList) console.logthis.topicList) }, methods: { async getTopicList) { let resp = await axios.get`/topic`) if resp.data.status === 1) { this.topicList = resp.data.data.data } } }
刷新页面,可以看到打印出来的是已经被赋值的数组。