Question

我目前使用

asyncData获取api数据，但它只能在页面中使用（不在组件中）。
但方法可用于页面和组件。

这两种方法的工作方式相同，所以我想使用方法来获取api数据。所以我想知道 asyncData和方法 之间有什么重要意义吗？

export default {
  async asyncData ({ req }) {
    let { data } = await axios.get(process.env.API_SERVER + `/v1/projects`)
    return { items: data }
  },
  data () {
    return {
      items: null
    }
  },
  methods: {
    async getItems () {
       let { data } = await axios.get(process.env.API_SERVER + `/v1/projects`)
       this.items = data
    }
  }

Answer 1

与#define TICK_NS (1000/72) #define WSP (1300 / TICK_NS)

类似

一旦你（ajax）请求了某些内容，你就会获得automatic promise所以你添加promise处理程序，这样当你获得数据时，你的then代码就会被执行。

所以then请求需要一些时间，因此我们正在制作该流程，因为ajax意味着继续流程async

同样适用于but when data received i need to execute some code which i have provided in then function（它只是具有异步功能的数据的包装器）和asyncData方法，您编写的内容代码将async用于await然后当given operation已完成方法将被执行。

就像operation alert('hello')用户点击await然后继续投放一样。

同样在服务器端呈现它的工作方式相同它会暂停执行流程一段时间ok然后再次恢复它。

更深入地了解这个incoming data答案（如果您更感兴趣的话）：Difference between async/await and ES6 yield with generators

Answer 2

有很大的不同：

asyncData是一种在组件初始化之前自动调用的方法，因此在组件数据设置之前就会被调用。

因此，您无法在方法中访问this。

asyncData对于服务器端呈现非常重要，您希望在使用获取的数据呈现组件之前首先获取数据。在初始化然后渲染组件之前，Nuxt将等待数据被提取。否则它将呈现为空。

初始化组件时首先可以使用方法。

您可以找到有关asyncData here in the docs的更多信息，并且有很好的描述。

asyncData和nuxt js中的方法有什么不同？

2 个答案: