Nuxt2——asyncData()/fetch()

asyncData()

asyncData方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。在这个方法被调用的时候，第一个参数被设定为当前页面的上下文对象，你可以利用 asyncData方法来获取数据，Nuxt.js 会将 asyncData 返回的数据融合组件 data 方法返回的数据一并返回给当前组件。

asyncData()只能用在页面组件，其提供两个调用方法，Promise和async/await

如果data中定义了content，asyncData()返回的content会覆盖data中的content

//Promise
asyncData({ $api, error }) {
    return $api
        .getWebPageContent()
        .then((res) => {
            return { content: res }
        })
        .catch((e) => {
            error({ statusCode: 500, message: e.message })
        })
}

//async/await
async asyncData(context) {
    const { res } = await $api.getWebContent()
    return { content : res }
}

 在此阶段，不能使用this获取组件实例，因为当前组件还不存在。变量全部通过参数传递的上下文content获取

fetch()

fetch 方法用于在渲染页面前填充应用的状态树（store）数据， 与 asyncData 方法类似，不同的是它不会设置组件的数据。

fetch()使用Promise形式调用，在旧版中不能使用this获取组件实例，但是在新版中可以调用this，前提是参数不在获取上下文

async fetch() {
  const res = await fetch('http://localhost:9999')
      .then( res  => return res )
  this.content = res.content
}

Context上下文

官方链接详图