nuxt js中的asyncData和方法有什么区别？答案

【问题标题】：What is different between asyncData and methods in nuxt js?nuxt js中的asyncData和方法有什么区别？
【发布时间】：2018-06-08 21:18:23
【问题描述】：

我现在用过

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

【问题讨论】：

标签： javascript vue.js nuxt.js

【解决方案1】：

有很大的不同：

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

因此，您将无法像在您的方法中那样访问this。

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

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

您会发现更多关于 asyncData here in the docs 的信息，并且那里的描述很好。

【讨论】：

【解决方案2】：

就像automatic promise

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

所以ajax 请求将需要一些时间，所以我们正在制作该流程，因为async 意味着继续流程but when data received i need to execute some code which i have provided in then function

asyncData（它只是具有异步功能的数据的包装器）和async 方法也是如此执行。

就像alert('hello') await 用户点击ok 然后继续流程。

在服务器端渲染中它的工作方式相同，它会为incoming data 停止执行流一段时间，然后再次恢复它。

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

【讨论】：