Nuxt 공부 (3) - 비동기 데이터

asyncData 메소드

store를 사용하지 않고 서버사이드에서 데이터를 가져오고 렌더링하고 싶을 때 사용한다. 이때 pages 컴포넌트를 로딩하기 전에 매번 호출되는 asyncData를 사용하면 된다. (pages 컴포넌트만 지원)

1) Promise 객체 사용하기

export default {
  asyncData ({ params, error }) {
    return axios.get(`https://my-api/posts/${params.id}`)
    .then((res) => {
      return { title: res.data.title }
    })
    .catch((e) => {
      error({ statusCode: 404, message: 'Post not found' })
    })
  }
}

2) async/await 사용하기

export default {
  async asyncData ({ params }) {
    let { data } = await axios.get(`https://my-api/posts/${params.id}`)
    return { title: data.title }
  }
}

3) callback 사용하기

export default {
  asyncData ({ params }, callback) {
    axios.get(`https://my-api/posts/${params.id}`)
    .then((res) => {
      callback(null, { title: res.data.title })
    })
    .catch((e) => {
      callback({ statusCode: 404, message: 'Post not found' })
    })
  }
}

4) data 표시하기

<template>
  <h1>{{ title }}</h1>
</template>