解决由于方法异步导致数据丢失问题_异步复位丢失数据-优快云博客

本文链接：https://blog.youkuaiyun.com/changchang_/article/details/120322225

这篇博客探讨了在Vue应用中遇到的异步问题，如何确保`orderInfo()`方法先于`createQRCode()`执行，以正确传递订单编号。通过引入`async/await`，实现了等待`orderInfo()`完成后再执行`createQRCode()`，从而在`createQRCode()`内部成功获取到`ticketId`参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

export default {
  name: "",
  data() {
    return{
      ticketId: '', // 订单编号
    }
  },
  mounted() {
    this.orderInfo()
    this.createQRCode()
  },
  methods: {
    //  显示订单信息——订单编号
    orderInfo() {
          let params = {
          xxx: this.xxxx
        }
          post('xxx', params).then((res) => {
          console.log(res.data)
          // 请求成功
          if (res.data.code === 20000) {
               this.ticketId = res.data.data.ticket.ticketId
               console.log(this.ticketId)
           }
        })
      })
    },
   createQRCode() {
          console.log(this.ticketId) // undefined
      })
    }
  }
}

分析：

orderInfo() 和 createQRCode()方法均为异步，即在methods中定义方法、在mounted中加载，在进入页面的时候两个方法都是直接调用，程序并不能判断两个方法谁先调用谁先发生。因此，从orderInfo()中通过接口获取的参数，无法在createQRCode()方法中再次获取。

在设定的逻辑流程中，希望orderInfo()方法先执行，在orderInfo()方法中获取的参数ticketId，可以专递給createQRCode()方法，供其使用。并且，两个方法均在页面打开时调用。

解决方法：

为实现orderInfo()先进行，完毕后，createQRCode()方法再加载，可以参考使用await/async来处理异步问题。

代码实现：

orderInfo() {
  return new Promise((resolve, reject) => {
    let params = { xxx: this.xxxx }
    post('xxx', params).then((res) => {
      resolve(this.data.data.ticket)
    })
  })
},
async createQRCode() {
  let ticketId = await this.orderInfo()
// console.log(ticketId )
}

至此，在createQRCode()方法中成功获得了ticketId参数！！！