Nuxt 비동기 데이터 - asyncData

• store 사용하지 않고 서버사이드에서 데이터를 가져오고 렌더링할 때
• pages 컴포넌트 로딩 전 매번 호출된다 (pages 컴포넌트만 지원)
• 서버사이드에서 호출되거나 페이지 이동할 때 발생
• asyncData 메소드 : 첫 인자로 context를 받아온다

async asyncData({ $axios, app, error, from, params, route, store }) { 
//context를 구조분해해서 사용하는 것
//이후 return data로 컴포넌트의 data와 병합

주의 : asyncData는 컴포넌트가 생성되기 전에 호출되기 때문에 액세스할 수 없다
그러므로 asyncData 안에서 컴포넌트를 참조하기 위해 this를 사용하지 말기!

asyncData 사용 방법
1. Promise 객체 리턴 가능. Nuxt는 컴포넌트를 렌더링하기 전에 promise가 처리될 때까지 기다린다
2. async/await 사용 가능.
3. 두번째 인자로 callback 정의. callback(err, data)와 같이 호출.

1. Promise

export default {
  asyncData ({ params }) {
    return axios.get(`https://my-api/posts/${params.id}`)
    .then((res) => {
    //Promise 
      return { title: res.data.title }
    })
  }
}

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) {
  //두번째 인자로 callback을 받고
    axios.get(`https://my-api/posts/${params.id}`)
    .then((res) => {
      callback(null, { title: res.data.title })
      //callback에서 err, data로 받아서 처리
    })
  }
}

에러 핸들링
: callback의 첫 인자로 error를 넣으면 된다