使用 Nuxt 获取数据

Question

我正在使用 Nuxt async fetch() 调用数据，如下所示：

export default {
....
  async fetch() {
    let childrenUrl = process.env.VUE_APP_MGNL_API_PAGES + this.projectPage + "/@nodes";
    await this.$http.$get(childrenUrl).then(childResult => {
      this.projectsPageChildren = childResult;
    })
  },

  fetchOnServer: false,
...
}

projectsPageChildren returns 一个包含 objects 的数组，每个数组包含一个属性 “servicesMain”，其中包含一个 URL 路径，请参见下面的屏幕截图。

我需要访问 servicesMain URL 路径的数据，我假设要获取它，我需要使用“servicesMain”进行另一个获取调用 URL。

所以我正在尝试的是：我使用 v-for 遍历 projectsPageChildren，在每个 child 上我调用一个函数“getMainService”，我将 servicesMain URL.

传递给该函数

    <div class="card" v-if="projectsPageChildren" v-for="project in projectsPageChildren">
      <div class="title">{{ getMainService(project.servicesMain) }}</div>
      <div class="title">{{ project.title }}</div>
      <Btn :to="project['@path']">More</Btn>
    </div>

方法“getMainService”被放置在 VUE 的“方法”钩子中，并使用它作为参数接收的 URL 进行另一个异步调用。

  methods: {
async getMainService(servicePath) {
    let url = process.env.VUE_APP_MGNL_API_PAGES + servicePath;
    await fetch(url)
      .then(result => {
        result.json().then((data) => {
          console.log(data);
          console.log(data.title);
          return data.title;
        });
      })
      .catch(error => console.log(error));
},

},

函数中的两个控制台日志语句显示了我需要该函数的数据return。

然而，我在浏览器中看到的只是“[object Promise]”。

总结一下：我正在使用 Nuxt 的 fetch() 钩子来获取我的数据，return 是一个数组。数组中的每个 object 都包含一个指向更多数据的 URL。

如何正确设置第二次获取调用？我在这里错过了什么？

我阅读了有关 Nuxt 数据获取和 Javascript 承诺和响应的文档，但 none 似乎完全解决了我的问题。

Answer 1

我最终是这样解决的：

在我的原始代码中，我在 Vue 模板部分调用了方法“getMainService()”，但它不起作用。现在我在 async fetch() 方法中发出第二个请求并从那里调用该方法。在 forEach 循环中，我基本上是将对象的属性重写为方法 returns.

这是新代码：

  async fetch() {
let thisPageUrl = process.env.VUE_APP_MGNL_API_PAGES + this.projectPage;
await this.$http.$get(thisPageUrl).then(thisPageResult => {
  this.projectsPageData = thisPageResult;
})

let childrenUrl = process.env.VUE_APP_MGNL_API_PAGES + this.projectPage + "/@nodes";
await this.$http.$get(childrenUrl).then(projectPages => {
  this.projectsPageChildren = projectPages;
  this.projectsPageChildren.forEach(projectPage => {
    this.getMainService(projectPage.extras[0].serviceMain).then(res => {
      projectPage.extras[0].serviceMain = res;
    });
  })

})

},

fetchOnServer: false,

方法 getMainService() 调用路径和 returns 字符串值：

  methods: {
 getMainService(servicePath) {
  let url = process.env.VUE_APP_MGNL_API_PAGES + servicePath;
  return this.$http.$get(url).then(serviceMain => {
    return serviceMain.title;
  })
},

},

模板位如下所示：

      <div>
    <div class="card" v-if="projectsPageChildren" v-for="(project, index) in projectsPageChildren">
      <div class="column_title">{{ project.serviceMain }}</div>
      <div class="title">{{ project.title }}</div>
      <Btn :to="project['@path']">More</Btn>
    </div>
  </div>

也许不是最漂亮的解决方案，但它确实有效。感谢@kissu 和@GrafiCode，你的评论让我朝着正确的方向前进。

使用 Nuxt 获取数据

Fetching data with Nuxt

javascript

fetch

es6-promise

nuxt.js