vue.js - 你如何等待 vue.js 创建的钩子？

Question

我有一个 vue.js 应用程序，我需要在其中等待对 Prismic API 的调用。问题是调用从创建的钩子开始，但我不知道如何告诉 vue 等待钩子。

代码是这样的：

...
async created() { 
  await this.getContent();
}, 
methods : {
  async getContent () {
    let document = null;
    try {
      document = await this.$prismic.client.getSingle(...);
    } catch(err) {
      return;
    }

    // add content to meta tags
  },
  ....

如您所见，在设置元标记中的内容之前，我正在等待调用 this.$prismic.client.getSingle(...)，但因为这需要 getContent() 方法异步，我还需要在 created() 挂钩中等待对 this.getContent() 的调用...这意味着我需要使 created() 挂钩异步。在这一点上，我受制于 Vue。我不知道如何告诉它等待对 created() 的调用。

这很重要，因为我们正试图让谷歌搜索爬虫读取我们的元标记。我们得到不一致的结果。在 Google Search Console 中，它有时会找到标签，有时却找不到。我们正在尝试查看代码中的 async/await 结构是否会有所帮助。这样，爬虫将等待 javascript 完成执行，然后再查找标签（或者我们期望的）。但是如果我们不能等待对 created() 的调用，那么等待其他方法调用就没有意义了。

有没有办法解决这个问题？谢谢。

编辑：在 Vue.js `mounted` 中是否有 `async/await` 的问题？与我的完全相同，但解决方案不适用。解决方案是使用 v-if="flag" 控制组件的呈现，其中标志设置在异步方法的末尾。就我而言，我受制于我无法控制的谷歌爬虫。

标签： vue.jsasync-await

Answer 1

假设this.$prismic.client.getSingle(...)返回一个承诺，你可以这样做：

created() { 
  this.getContent();
}, 
methods: {
  getContent() {
    this.$prismic.client.getSingle(...)
      .then((response) => {
        // add content to meta tags
      })
      .catch((err) => {
        // error
      });
  }
}