非同期を約束する

1.非同期関数が他の関数にネストされている場合は、asyncを使用してループで待機する必要があります。
そうしないと、非同期になります。

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非同期送信selectupdateデータベースへのコマンド、最初に戻り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结果后返回

その理由は、同期制限を与えgetEventListupdateEvent追加したが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结果先返回

おすすめ

転載: blog.csdn.net/claroja/article/details/113836435