Asyncdata와 Fetch의 차이

Asyncdata와 Fetch의 차이

가져오기 데이터와 비동기 데이터의 정확한 차이점공식 문서에는 다음과 같이 되어 있다.

비동기 데이터

데이터를 가져와 서버 측에서 렌더링하십시오.Nuxt.js는 구성 요소 데이터를 설정하기 전에 비동기 작업을 처리할 수 있는 비동기 데이터 방법을 추가한다.

비동기 데이터는 구성요소를 로드하기 전에 매번 호출된다(페이지 구성요소에 한함).서버 측에서 호출하거나 해당 경로로 이동하기 전에 호출할 수 있다.이 방법은 컨텍스트 객체를 첫 번째 인수로 수신하며, 이 인수를 사용하여 일부 데이터를 가져오고 구성 요소 데이터를 반환할 수 있다.

---

가져오기

가져오기 방법은 페이지를 렌더링하기 전에 저장소를 채우는 데 사용되며, 구성 요소 데이터를 설정하지 않는다는 점을 제외하면 비동기 데이터 방식과 같다.설정된 경우 가져오기 방법은 구성요소를 로드하기 전에 매번 호출된다(페이지 구성요소에 한함).서버 측에서 호출하거나 해당 경로로 이동하기 전에 호출할 수 있다.

가져오기 방법은 컨텍스트 개체를 첫 번째 인수로 수신하며, 데이터를 가져와 저장소를 채우는 데 사용할 수 있다.가져오기 방법을 비동기식으로 만들려면 약속, nuxt.js를 반환한 후 구성 요소를 렌더링하기 전에 약속이 해결될 때까지 기다리십시오.

---

데이터로 저장소를 채우는 데 Fetch가 사용되었는가?그러나 비동기 데이터에서 이것은 또한 스토어를 커밋할 수 있는가?나는 왜 두 가지 방법이 있는지 이해할 수 없다.

두 방법 모두 초기 로드에 서버측을 실행하며, 그 후에 응용프로그램을 탐색하면 클라이언트측을 실행한다.

이 방법들을 다른 방법보다 먼저 사용할 수 있는 이점에 대해 누군가 나에게 설명해 줄 수 있을까?

도와줘서 고마워.

내가 말하고자 하는 것에 대한 구실로 몇 가지 요점을 다시 한 번 강조하겠다.

• asyncData구성 요소 수준 개체를 설정하고 vuex 저장소에 액세스할 수 있음
• fetch구성 요소 수준 개체를 설정할 수는 없지만 vuex 저장소에 액세스할 수 있음
• 둘 다asyncData&fetch초기 로드 중에 서버 측에서 트리거됨
• 후, 초기하,asyncData그리고fetch될 때 해당지(가地) 거됨리(트里)

1) 당신의 디자인이

• vuex 저장소를 중앙 저장소로 사용
• 전체 애플리케이션의 vuex 저장소에서 데이터 액세스

그때use fetch

2) 설계가 맞다면

• vuex 저장소를 중앙 저장소로 사용
• 구성 요소 수준 개체를 설정하는 옵션 있음
• 특정 경로에서 가져온 데이터는 단일 구성 요소에서만 사용됨
• vuex 저장 또는 구성 요소 수준 개체에 대한 사용 권한을 가질 수 있는 유연성 필요

그때use asyncData

이 방법들을 다른 방법보다 먼저 사용할 수 있는 이점에 대해 누군가 나에게 설명해 줄 수 있을까?

사용하는 데 아무런 단점이 없다고 본다.asyncData또는fetch

선 asyncData또는fetch전적으로 당신의 건축에 달려있다.

NuxtJS >= 2.12 업데이트

새로운 NuxtJS 버전(>= 2.12)을 사용할 때는 답변에서 언급된 몇 가지 사항이 더 이상 적용되지 않는다.RFC 공식 발표.

새로운 행동과 사이의 차이점에 대한 좋은 설명asyncData그리고 새로운 것fetchNuxtJS 공식 블로그의 이 게시물에서 찾을 수 있다.

둘 중 하나를 선택하는 것에 대해, 나는 원래의 답이 여전히 적용된다고 믿는다.

사용하는 데 아무런 단점이 없다고 본다.asyncData또는fetch

선 asyncData또는fetch전적으로 당신의 건축에 달려있다.

- TL;DR - 사 asyncData페이지를 렌더링하기 전에 로드해야 하는 항목에 대해 다음을 사용하십시오.fetch다른 모든 것을 위해

주요 차이점:

유용성

• asyncData페이지 구성요소에서만 사용 가능
• fetch모든 구성요소(페이지 구성요소 포함)에서 사용 가능

싣고 있는

• asyncData페이지 전환이 해결될 때까지 차단한다.이는 반환된 데이터 속성이 구성 요소에 제공될 수 있음을 보장한다는 것을 의미한다.그러나 그것은 또한 사용자들이 콘텐츠를 보기 전에 더 오래 기다려야 할 수도 있다는 것을 의미한다.
• fetcha를 폭로하다.$fetchState.pending그 일을 어떻게 처리하느냐는 당신에게 달려 있다.

오류 처리

• 에 에러가 한다면.asyncData페이지가 렌더링되지 않다
• fetcha를 폭로하다.$fetchState.error그 일을 어떻게 처리하느냐는 당신에게 달려 있다.

한 가지 요점은 위에서 언급되지 않은 것으로 하고 싶다(적어도 명확하게는 말하지 않는다).비동기 데이터는 페이지의 데이터() 객체에 데이터를 자동으로 병합한다.가져오기는 그렇지 않다.가져오기 기능을 사용하면 데이터를 원하는 대로 처리하는 것이 너에게 달려 있다.

제1회

의 성질이 다르기 때문이다.asyncData그리고fetch의 경우에 한 가지 중요한 장점이 있다.asyncData- Nuxt는 다음 페이지로 이동하기 전에 비동기 데이터 후크가 완료될 때까지 기다린다.

여기서부터 시작:

가져오는 것과 달리 비동기 데이터 후크가 반환하는 약속은 경로 전환 중에 해결된다.즉, 클라이언트 측 전환 중에는 "로딩 자리 표시자"가 보이지 않는다는 것을 의미한다(사용자에게 로딩 상태를 나타내는 데 로딩 막대를 사용할 수 있다).대신 Nuxt는 다음 페이지로 이동하거나 오류 페이지를 표시하기 전에 비동기 데이터 후크가 완료될 때까지 기다린다.

연습한다는 것은 무엇을 의미하는가?

다음 레이아웃 구조가 있다고 상상해 보십시오.

• 헤더
• 내용
• 바닥글

사용의 경우fetch새 페이지를 열면 머리말과 바닥글만 몇 초 동안 볼 수 있다(내용 데이터가 다운로드 중이기 때문에).사용의 경우asyncData이 문제를 피하고 머리글 + 내용 + 바닥글이 있는 새 페이지를 보십시오(그러나 이 방법의 단점은 컨텐츠 데이터를 다운로드하려면 동일한 몇 초를 기다려야 한다는 것이다).

제2회

나는 웹의 다른 장소들에서 당신이 무언가를 Vuex에 저장하기를 원할 때, 당신은 사용해야만 한다는 것을 본다.fetch- 이것은 잘못된 것이다.

아래 코드(내 프로젝트에서 가져온 코드)에서 당신은 다음의 구현을 찾을 수 있다.asyncData, 그리고fetch둘 다 데이터를 vuex에 저장한다.

<script>
import { mapActions, mapMutations, mapState } from 'vuex'

export default {
  name: 'PagesBlog',

  async asyncData ({ store }) {
    if (!store.state.global.blogAuthors.length) {
      store.commit('global/blogAuthorsSet', await blogAuthorsDownload())
    }

    await store.dispatch('global/blogsDownloadAndSet')
  },

  async fetch () {
    if (!this.blogAuthors.length) {
      this.blogAuthorsSet(await blogAuthorsDownload())
    }

    await this.blogsDownloadAndSet()
  },

  computed: {
    ...mapState('global', [
      'blogAuthors'
    ])
  },

  methods: {
    ...mapActions('global', [
      'blogsDownloadAndSet'
    ]),

    ...mapMutations('global', [
      'blogAuthorsSet'
    ])
  }
</script>

요약

1. 일부 중요한 데이터가 있는 경우(사용자에게 보이거나 사용자에게 보이지 않지만 일부 숨겨진 계산에 필요한 경우) - 사용asyncData.

2. 모든 정보가 포함된 페이지를 보려면(예: 머리글 + 내용 + 바닥글이 있는 경우) - 사용asyncData.

3. 나중에 로드할 수 있는 데이터가 있는 경우 - 사용fetch.

---

후크 및 Nuxt 라이프사이클 가져오기

I. 가져오기 및 비동기 데이터는 서버 측에서 처리된다.

II. 사용 방법의 차이를 알 수 있다:

a) 가져오기: 저장소 데이터 변경

<script>
export default {
  async fetch ({ store, params }) {
    await store.dispatch('GET_STARS');
  }
}
</script>

b) 비동기 데이터: 컨텍스트 변경(구성 요소 데이터)

<script>
export default {
  asyncData (context) {
    return { project: 'nuxt' }
  }
}
</script>

참조URL: https://stackoverflow.com/questions/49251437/difference-between-asyncdata-vs-fetch