Vue：等到父函数完成运行

Posted 2023-02-23

【中文标题】Vue：等到父函数完成运行

【英文标题】：Vue: Wait until parent function is finished running

【发布时间】：2020-11-12 12:00:28

【问题描述】：

我正在调用父函数，但之后我的 axios 调用在父函数完成之前触发。有没有办法在这里使用 Promise 以便在我的 axios post 调用之前先解析父函数？

let data = 
   name: "Charles"
   age:  44


this.$parent.updateInfo(data);

axios.post('/admin/setup/change', 
    status: "new",
    comment: this.newNotes,
)

【参考方案1】：

如果$parent.updateInfo 是异步的，你可以这样做：

this.$parent.updateInfo(data)
  .then(() => 
    axios.post('/admin/setup/change', 
      status: "new",
      comment: this.newNotes,
    );
  )
  .catch(error => 
    console.log(error.message);
  )

那么你可以确定axios.post会在$parent.updateInfo之后被调用

【讨论】：

有趣...在 updateInfo 内部是一个 axios 调用。我仍然可以像在孩子身上那样使用then()？

updateInfo return Promise 这样你就可以在这个 Promise 上使用 .then 来处理这个 Promise 的结果。阅读此内容应该可以帮助您理解： - What is promise - handling promise with .then

您也可以使用await，这会使代码更清晰，但是您要调用此await $parent.updateInfo 和await axios.post 的方法必须是异步的（async）。 async & await

【参考方案2】：

您可以使用 async/await，因此代码将等待直到进一步执行。

顺便说一句，我不认为this.$parent.updateInfo(data); 是从父范围触发函数的常用方法。我更愿意向父实例发出一个事件，正如这里所建议的https://***.com/a/46208765/11377556