promise async await

亦凉 2022-10-30 05:19 194阅读 0赞

1.当异步函数嵌套到别的函数内后,需要循环使用async和await  
否则就会变成异步

async getEventList () { 
      const {  data: res } = await this.$http.get('/events')
      this.eventList = res
    },
    async updateEvent () { 
      await this.$http.post('/events/update', this.currentEvent)
    },
    async finish () { 
      await this.updateEvent()//等待异步执行完
      await this.getEventList()//等待异步执行完
    }

2.SQL中的异步发送 `select` 和`update`命令到数据库,首先返回的是`select`,因为查询相对较快,所以要使用`async`和`await`配合使用.  
在需要执行先更新再查询的逻辑时要特别注意

踩坑复现:

async getEventList () { 
          const {  data: res } = await this.$http.get('/events')
          this.eventList = res
        },
        async updateEvent () { 
          await this.$http.post('/events/update', this.currentEvent)
        },
        finish () { 
          this.updateEvent()
          this.getEventList() // ??这个bug是什么原因
        },

当调用`finish`函数时,数据库首先返回了`getEventList`的结果,然后返回`updateEvent`的结果:

[Event{ id=1, name='ps学习',}, Event{ id=2, name='ps学习', }] //getEventList结果先返回
    Event{ id=1, name='ps学习',}//updateEvent结果后返回

原因是虽然给`getEventList`和`updateEvent`加上了同步限制,但是在`finish`外层函数中却没有限制,所以还是异步调用,要改成

async finishStudy () { 
      await this.updateEvent()
      this.studyDialogVisible = false
      await this.getEventList() // ??这个bug是什么原因
    },

这样返回的结果就正常了

Event{ id=1, name='ps学习',}//updateEvent结果后返回
    [Event{ id=1, name='ps学习',}, Event{ id=2, name='ps学习', }] //getEventList结果先返回

发表评论取消回复

表情：

评论列表（有 0 条评论，194人围观）

还没有评论，来说两句吧...

相关阅读

相关 promise 和 async await区别

什么是Async/Await? 　　async/await是写异步代码的新方式，以前的方法有回调函数和Promise。　　async/await是基于Promise实

谁践踏了优雅/ 2022年12月27日 01:48/ 0 赞/ 192 阅读

相关 promise async await

1.当异步函数嵌套到别的函数内后,需要循环使用async和await 否则就会变成异步 async getEventList () { const

亦凉/ 2022年10月30日 05:19/ 0 赞/ 195 阅读

相关 Callbacks, Promises and Async/Await

转载地址： [https://medium.com/front-end-hacking/callbacks-promises-and-async-await-ad475

我就是我/ 2022年04月22日 01:34/ 0 赞/ 200 阅读

相关 Promise，Async，await简介

Promise 对象转载：http://wiki.jikexueyuan.com/project/es6/promise.html 基本用法 ES6 原生

缺乏、安全感/ 2022年04月11日 02:12/ 0 赞/ 239 阅读

相关 async/await 和 promise

> 小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大

港控/mmm°/ 2022年02月15日 07:19/ 0 赞/ 320 阅读

相关 Callbacks, Promises and Async/Await

为了简要说明Promise，常见函数设置为胖箭头函数。 function() {} function(a) {} function(a,b) {}

短命女/ 2022年01月20日 07:47/ 0 赞/ 219 阅读

相关回调、Promise、async-await

第一章异步：现在与将来程序中现在运行的部分和将来运行的部分之间的关系就是异步编程的核心。场景：等待用户输入、从数据库或文件系统中请求数据、通过网络发送数据并等待响应

小咪咪/ 2021年12月17日 02:13/ 0 赞/ 352 阅读

相关 Promise和async/await

这篇先讲Promise和async/await使用，下一篇讲在事件循环中Promise和async/await执行顺序 1.先看一段代码先看一段代码，对Promise和a

一时失言乱红尘/ 2021年10月24日 02:24/ 0 赞/ 442 阅读

相关 promise 和 async await区别

什么是Async/Await? 　　async/await是写异步代码的新方式，以前的方法有回调函数和Promise。　　async/await是基于Promise实现

蔚落/ 2021年07月24日 19:21/ 0 赞/ 521 阅读

相关 Callbacks, Promises and Async/Await

假设你有一个函数可以在一段随机的时间后打印一个字符串： function printString(string){ setTimeout( () => { ...

你的名字/ 2021年04月19日 14:24/ 0 赞/ 475 阅读