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)와 같이 호출.
export default {
asyncData ({ params }) {
return axios.get(`https://my-api/posts/${params.id}`)
.then((res) => {
//Promise
return { title: res.data.title }
})
}
}
export default {
async asyncData ({ params }) {
let { data } = await axios.get(`https://my-api/posts/${params.id}`)
return { title: data.title }
}
}
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를 넣으면 된다