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
  },
  ....

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

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

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

编辑：Is `async/await` available in Vue.js `mounted`?处的问题与我的问题完全相同，但解决方案不适用。解决方案是使用v-if =“ flag”控制组件的呈现，其中将flag设置在async方法的末尾。就我而言，我受制于我无法控制的Google搜寻器。

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
      });
  }
}

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

1 个答案: