asyncData와 nuxt j의 메소드의 차이점은 무엇입니까?

Question

나는 현재 API 데이터를 가져 오기위한

• asyncData을 사용 있지만 (안 구성 요소) 페이지에서 사용 할 수 있습니다.
• 그러나 방법은 페이지 및 구성 요소에서 사용할 수 있습니다.

이 두 가지 방법은 동일한 방식으로 작동하므로 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 
    } 
    } 

Answer 1

그 같은 automatic promise

당신이 (아약스) 요청 뭔가 당신은 당신이 당신의 then 코드가 실행됩니다 데이터를 얻을 때 promise 그래서 당신이 then 핸들러 때문에 추가 일단. async 수단이 but when data received i need to execute some code which i have provided in then function

같은 흐름을 계속

그렇게 ajax 요청 asyncData (비동기 기능을 통해 데이터에 대한 단지 래퍼)과 적 코드 당신이 무엇을 쓰기 async 방법 간다 그래서 우리는 그 흐름을 만들고 시간이 좀 걸릴 것입니다 내부 await은 given operation이고 그 때 operation이 완료되면 메소드가 실행됩니다.

해당 내용은 alert('hello')입니다. await 사용자는 ok을 클릭 한 후 계속 진행합니다.

도 마찬가지로 서버 측 렌더링에서 incoming data에 대해 잠시 동안 실행 흐름을 중지하고 다시 시작합니다.

그것을 더 깊이이 js generators 대답에 (당신이 더 많은 관심이 있다면) : Difference between async/await and ES6 yield with generators

Answer 2

는 매우 큰 차이가있다 :

asyncData 구성 요소가 초기화되기 전에 자동으로 호출되는 방법입니다 따라서 구성 요소 데이터가 설정되기 전에

따라서 귀하의 방법처럼 this에 액세스 할 수 없습니다.

asyncData은 가져온 데이터로 구성 요소를 렌더링하기 전에 데이터를 먼저 가져 오는 서버 측 렌더링에 중요합니다. Nuxt는 데이터를 불러올 때까지 기다렸다가 구성 요소를 초기화 한 다음 렌더링합니다. 그렇지 않으면 빈 상태로 렌더링됩니다.

구성 요소가 초기화 될 때 먼저 메서드를 사용할 수 있습니다.

asyncData here in the docs에 대한 자세한 내용은 잘 설명되어 있습니다.