Question

我正在尝试构建一个具有某些功能的amp网站，因此我需要从API获取一些数据，我尝试了很多方法，但是没有一种对我有用。我的枪手之一。

created () {
    fetch('http://myapi/api/post/', { 'Content-Type': 'application/json' }).then(data => {
        this.posts.push('I hope it works');
    });
}

我尝试了很多方法，但是找不到解决方案。

Answer 1

我假设您想使用服务器端渲染。

如果希望从API开始获取组件数据，则必须使用asyncData方法。 https://nuxtjs.org/guide/async-data/

export default {
  asyncData () {
    return fetch(`https://my-api/api/post/`)
      .then((res) => {
        return { posts: res.data.posts }
      })
  }
}

之后，您可以使用posts属性，就像在data()内部声明它一样

Answer 2

使用 fetch 钩子： https://nuxtjs.org/docs/2.x/components-glossary/pages-fetch/

获取钩子的工作原理： https://nuxtjs.org/blog/understanding-how-fetch-works-in-nuxt-2-12/

data() {
  return {
    posts: []
  }
},
async fetch() {
  const response = await this.$http.$get(
    'http://myapi/api/post/',
  )
  this.posts = response
},

如何使用amp在nuxt js中获取数据

2 个答案: