| vue 中的 async await 异步 等待 按顺序执行 | 您所在的位置：网站首页 › 等待等等怎么写 › vue 中的 async await 异步 等待 按顺序执行 |
vue 中的 async await 异步 等待 按顺序执行
|
async/await场景:
这是一个用同步的思维来解决异步问题的方案，当前端接口调用需要等到接口返回值以后渲染页面时。 asyncasync的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行，async 函数返回的是一个promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。 awaitawait的含义为等待。意思就是代码需要等待await后面的函数运行完并且有了返回结果之后，才继续执行下面的代码。这正是同步的效果。
简单案例： async function timeout() { return 'hello world' } console.log(timeout()); console.log('虽然在后面，但是我先执行');
原来async 函数返回的是一个promise 对象，如果要获取到promise 返回值，我们应该用then 方法， 继续修改代码: async function timeout() { return 'hello world' } timeout().then(result => { console.log(result); }) console.log('虽然在后面，但是我先执行');
我们获取到了"hello world', 同时timeout 的执行也没有阻塞后面代码的执行，和 我们刚才说的一致。
await 是等待的意思，那么它等待什么呢，它后面跟着什么呢？其实它后面可以放任何表达式，不过我们更多的是放一个返回promise 对象的表达式。 注意 await 关键字只能放到async 函数里面 例子：现在写一个函数，让它返回promise 对象，该函数的作用是2s 之后让数值乘以2: // 2s 之后返回双倍的值 function doubleAfter2seconds(num) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(2 * num) }, 2000); } ) }就这一个函数，我们可能看不出async/await 的作用，如果我们要计算3个数的值，然后把得到的值进行输出呢？ async function testResult() { let first = await doubleAfter2seconds(30); let second = await doubleAfter2seconds(50); let third = await doubleAfter2seconds(30); console.log(first + 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.log(this.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.log(this.topicList) }, methods: { async getTopicList() { let resp = await axios.get(`/topic`) if (resp.data.status === 1) { this.topicList = resp.data.data.data } } }刷新页面，可以看到打印出来的是已经被赋值的数组。
|
【本文地址】