처음에는 Vue의 독단적인 단일 파일 템플릿을 처리하고 여러분이 알고 좋아하는 자바스크립트 기능을 사용하는 방법이 혼란스러울 수 있습니다. 그러나 두려워하지 마십시오. 매우 쉽습니다.

생성된 후크

생성된 후크는 lifecycle hook 템플릿이 처음 생성될 때 마운트되기 전에 호출되는 메서드입니다.
created () 메서드를 async로 선언하고 내부에서 비동기 작업을 수행할 수 있습니다. 이 예에서는 사용자 목록을 로드하고 있습니다.

데이터를 사용할 수 있을 때까지 사용자의 상태null를 처리하는 것을 잊지 마십시오. 템플릿에서 v-if="users"를 사용하거나 더 나은 방법으로 로딩 애니메이션을 추가하세요.{.text-gray-600}

export default {
  data () {
    return {
      users: null,
    }
  },
  async created () {
    const response = await fetch("https://reqres.in/api/users")
    const { data: users } = await response.json()
    this.users = users
  },
}

마운트 후크

탑재된 후크는 생성된 후크와 거의 동일하지만 구성 요소가 탑재된 후 실행됩니다(DOM에 추가됨). 생성된 후크는 일반적으로 API 호출에 선호됩니다.

위와 같이 간단히 mounted () 메서드를 비동기식으로 만들 수 있습니다.

export default {
  data () {
    return {
      users: null,
    }
  },
  async mounted () {
    const response = await fetch("https://reqres.in/api/users")
    const { data: users } = await response.json()
    this.users = users
  },
}

행동 양식

Vue를 사용하면 모든 메서드가 비동기 메서드가 될 수 있습니다. 다음은 버튼 클릭당 요청되는 데이터의 예입니다.

<button @click="loadUsers">Load Users</button>
<div v-if="users">{{ users }}</div>

export default {
  data () {
    return {
      users: null,
    }
  },
  methods: {
    async loadUsers () {
      const response = await fetch("https://reqres.in/api/users")
      const { data: users } = await response.json()
      this.users = users
    }
  },
}

계산된 속성

계산된 속성은 예외이며 Vue는 비동기를 허용하지 않습니다. vue-async-computed 플러그인과 같이 이 제한을 피할 수 있는 방법이 있지만 이는 좋은 방법이 아닙니다.

비동기 계산 속성이 필요한 경우 구성 요소에서 아키텍처 오류를 범했을 수 있습니다. 약간의 경험이 있으면 계산된 속성을 순수한 동기 함수로 처리하는 것이 자연스러워집니다. 모든 비동기 작업은 메서드에서 수행되어야 합니다.

여전히 비동기 계산 속성이 필요하다면 감시자를 대신 사용해 보십시오.

감시자

Watchers 데이터 변경을 감지하면 비동기 작업을 수행할 수 있습니다. 따라서 감시자는 계산된 속성을 비동기식으로 업데이트할 수 있습니다.

다음은 계산된 소품이 사용자 수를 반환하는 예입니다. 감시자는 userRoles 필터가 변경되는 즉시 사용자 목록을 다시 로드합니다.

export default {
  data () {
    return {
      userRoles: ['admin'],
      users: [...],
    }
  },
  watch: {
    async userRoles (newRoles) {
      const query = JSON.stringify(newRoles)
      const response = await fetch(`https://reqres.in/api/users?roles=${query}`)
      const { data: users } = await response.json()
      this.users = users
    }
  },
  computed: {
    userCount () {
      return this.users.length
    }
  },
}

Nuxt 및 비동기 데이터

Nuxt은 Vue를 기반으로 하는 프레임워크로 서버 측 렌더링 애플리케이션을 더 쉽게 개발할 수 있습니다.

Nuxt에는 구성 요소가 생성되기 전에 호출되는 asyncData ()라는 특수 메서드가 있습니다. 이렇게 하면 서버가 구성 요소를 클라이언트에 보내기 전에 미리 렌더링할 수 있고 새 구성 요소가 사용자에게 표시되기 전에 클라이언트가 데이터를 미리 가져올 수 있습니다. 이는 사용자가 모바일 앱과 유사한 인스턴트 페이지 탐색 경험을 생성하는 다음 링크를 클릭하기도 전에 데이터를 가져올 수 있는 페이지 수준 구성 요소에서 특히 흥미로웠습니다.
asyncData ()는 구성 요소의 인스턴스 및 this 컨텍스트에 액세스할 수 없으므로 대신 데이터를 반환해야 합니다.

export default {
  async asyncData () {
    const response = await fetch("https://reqres.in/api/users");
    const { data: users } = await response.json();
    return { users }
  },
  data () {
    return {
      users: null,
    }
  },
}

기사가 마음에 드셨거나 질문이 있으시면