随笔 - 419  文章 - 3  评论 - 331  阅读 - 120万

vue 中的 async await 异步 等待 按顺序执行

async/await场景:

这是一个用同步的思维来解决异步问题的方案,当前端接口调用需要等到接口返回值以后渲染页面时。

async

async的用法,它作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思, 异步函数也就意味着该函数的执行不会阻塞后面代码的执行,async 函数返回的是一个promise 对象,可以使用then方法添加回调函数。当函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。

await

await的含义为等待。意思就是代码需要等待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
      }
    }
}
复制代码

刷新页面,可以看到打印出来的是已经被赋值的数组。

 

posted on   JoeYoung  阅读(30386)  评论(0编辑  收藏  举报
编辑推荐:
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
阅读排行:
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· RFID实践——.NET IoT程序读取高频RFID卡/标签
历史上的今天:
2020-09-07 Vue 使用 vue-echarts 图表插件
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

点击右上角即可分享
微信分享提示