组件更新乱序 Vue

Question

这是我使用 Bootstrap、Vue 和 Axios 的以下代码：设置：*忽略component_a中的标签内容main.html  <div v-if="activeDisplay === 'ep'">    <component_b @set-active-display="setActiveDisplay" :info="info"></component_b>  </div>  <div v-else-if="activeDisplay === 'dashboard'">    <dashboard></dashboard>  </div>  <div v-else-if="activeDisplay === 'activeEp'">    <component_a :info="info"></component_a>  </div>  <div v-else>    <dashboard></dashboard>  </div>问题：单击表中 B 中的链接后，它正确调用了setActiveDisplay方法和getAPIData。但是，在getAPIData（即 Axios GET 调用）运行后，info（根实例）不会更新为在 B 中的表中单击的单个项目，我从登录到控制台中知道这一点。info（根实例）包含表中的所有对象。（组件 B 是打开网页时首先显示的组件）然后，网页更改（正确）以显示组件 A（由于activeDisplay设置变量并显示正确的组件），但我可以看到与表中项目数相同的选项卡数。我一瞬间就看到了这一点。然后，组件 A 会更新以显示最初单击的正确选项卡。我确定这是一个操作顺序问题（因为我是 Vue 的新手），但似乎无法弄清楚为什么info（根实例）对象在运行时未设置为单个项目。我已经在浏览器中运行了调试器，并且getAPIData从未被第二次调用。getAPIData正在获取正确的数据，但就像 Vue 持有从修改信息到渲染组件 A 的getAPIData调用的结果（即使我在单击组件 B 中的链接后要求它更新）操作顺序在根信息中使用多个对象在表中渲染 B => 用户单击表中的链接 => 在 B 中调用 setActiveDisplay => 在根中发出事件调用 setActiveDisplay => 在根中调用 setActiveDisplay 的 getAPIData （直到此处正确工作） =>应该更新根info对象到单个项目=> 由于根info对象（并且由于传递给 A 的道具）包含一个来自getAPIData调用的对象，因此使用一个选项卡呈现 A编辑1：经过更多调试，我看到在 vue.js开始处理点击后，使用正确的 API url 调用了axios.js 的dispatchRequest 。. . .所以，这个方法完成后，getAPIData 中的this.info = response.data中没有数据。这是我从调试中发现的流程细分：运行 getAPIData 完成（导致根实例的 info 对象未定义 => vue.js 处理组件 B 中表中项目的单击事件 => axios.js 正在使用完整 URL 调用 dispactRequest 事件 => more vue. js 处理 => 从 getAPIData 函数接收响应并将信息（根）对象设置为响应所以我看到在显示我需要的数据之前，我需要等待 Axios 调用完成。现在的问题是，我如何在 Vue 中做到这一点？谢谢你。

Answer 1

所以我看到在显示我需要的数据之前，我需要等待 Axios 调用完成。现在的问题是，我如何在 Vue 中做到这一点？

我假设您需要在设置之前等待axios.get()调用getApiData()完成this.activeDisplay。为此，首先返回axios.get()(ie, a Promise) 的结果，以便调用者可以await得到它。

getAPIData(id,type) {

  // BEFORE:

  //axios.get(...)

  // AFTER:

  return axios.get(...)

}

然后制作setActiveDisplay()一个async函数，允许编辑的getApiData()结果await：

// BEFORE:

//setActiveDisplay: function (id, ad) { 

// AFTER:

async setActiveDisplay(id, ad) {

  if (...) {

    await this.getApiData(...)

  }

  this.activeDisplay = ad

}

或者，您可以不使用async/await并使用Promise.prototype.then()：

setActiveDisplay: function (id, ad) {

  if (...) {

    this.getApiData(...).then(() => this.activeDisplay = ad)

  }

}