VueJS-데이터 가져오기 프로그램 구성 요소 재사용 가능

원격 데이터를 가져오지 않고 사용자에게 표시할 웹 응용 프로그램의 수를 손가락으로 셀 수 있습니다.
따라서 다음 단일 페이지 응용 프로그램(VueJS로 작성)을 가정합니다.😍) 외부 데이터 획득이 필요할 것입니다. 저는 사용자에게 데이터 획득이 필요한 다른 구성 요소의 상태를 관리하고 사용자에게 적절한 피드백을 쉽게 제공할 수 있는 구성 요소를 소개하고 싶습니다.

첫번째 일
우선, 사용자가 무슨 일이 일어나고 있는지 정확하게 알 수 있도록 응용 프로그램에서 정확한 상태를 보여주는 것이 어떻게 유용한지 고려해야 한다.이는 데이터 로드를 기다리는 동안 인터페이스가 동결된 것으로 간주되고 오류가 발생할 경우 지원 부서에 연락할 수 있도록 적절한 피드백을 제공하는 것을 방지합니다.

로드/오류/데이터 모드
이것은 공식 모델인지 아닌지는 확실하지 않지만 (참고 자료를 알고 있다면 아래에서 평론해 주십시오.) 이 간단한 모델은 응용 프로그램/구성 요소의 상태를 쉽게 구성하는 데 도움을 줄 수 있다는 것을 알고 있습니다.
이 물체를 고려해 보자.이것은 users 목록의 초기 상태를 나타냅니다.

const users = {
  loading: false,
  error: null,
  data: []
}

이러한 상태 대상을 구축하면 프로그램에서 발생하는 상황에 따라 모든 속성의 값을 변경하고 그것들을 사용하여 한 번에 다른 부분을 표시할 수 있습니다.따라서 데이터를 가져올 때loading를 true로 설정하고, 완성되면 loading를 false로 설정한다.
이와 유사하게 error와data도 캡처 결과에 따라 업데이트해야 한다. 오류가 있으면 error 속성에 분배하고 그렇지 않으면 data 속성에 분배해야 한다.

전공
위에서 말한 바와 같이 상태 대상은 여전히 너무 통용된다.VueJS 응용 프로그램 컨텍스트에 배치합니다.구성 요소를 실현하고 slots 을 사용함으로써 이 점을 실현할 것입니다. 이것은 데이터를 캡처 구성 요소에서 하위 구성 요소로 전달할 수 있도록 합니다.
VueJS 설명서에 따르면:

VueJS implements a content distribution API inspired by the Web Components spec draft, using the <slot> element to serve as distribution outlets for content.

먼저 다음과 같이 기본 어셈블리 구조를 생성하고 상태 객체를 구현users합니다.

export default {
  data() {
    return {
      loading: false,
      error: null,
      data: null
    }
  }
}

현재, 데이터를 가져오는 방법을 만들고 state 대상을 업데이트합니다.구성 요소가 완전히 로드될 때 요청할 수 있도록 created 방법에서 API 요청을 수행했습니다.

import { fetchUsers } from '@/services/users'

export default {
  data() {
    return {
      loading: false,
      error: null,
      data: []

    }
  },
  created() {
    this.fetchUsers()
  }
  methods: {
    async fetchUsers() {
      this.loading = true
      this.error = null
      this.users.data = []

      try {
        fetchUsers()
      } catch(error) {
        this.users.error = error
      } finally {
        this.users.loading = false
      }
    }
  }
}

다음 단계는 템플릿을 구현하는 것입니다. 이 템플릿은 불러오기, 오류, 데이터 상태에 따라 다른 내용을 표시하고 slot 를 사용하여 데이터를 하위 구성 요소에 전달합니다.

<template>
  <div>
    <div v-if="users.loading">
      Loading...
    </div>
    <div v-else-if="users.error">
      {{ users.error }}
    </div>
    <slot v-else :data="users.data" />    
  </div>
</template>

fetcher 구성 요소를 구축한 후 UsersList 구성 요소에서 사용하도록 합니다.

<template>
   <UsersFetcher>
     <template #default="{ data }">
       <table>
         <tr>
           <th>ID</th>
           <th>Name</th>
           <th>Age</th>
         </tr>
         <tr v-for="user in data" :key="user.id">
           <td>{{ user.id }}</td>
           <td>{{ user.name }}</td>
           <td>{{ user.age }}</td>
         </tr>
       </table>
     </template>
   </UsersFetcher>
</template>

import UsersFetcher from '@/components/UsersFetcher'

export default {
  name: 'UsersList',
  components: {
    UsersFetcher
  }
}

어셈블리 재사용 가능
이것은 오류/로드/데이터 모델을 실현하는 매우 간단한 방법으로 외부 데이터를 얻을 때 사용자에게 적당한 피드백을 제공할 수 있지만 위의 실현은 다시 사용할 수 없다. 왜냐하면 이것은 엄격한 획득이기 때문이다users.Google 캡처 구성 요소를 변경함으로써, Google은 이를 더욱 통용할 뿐만 아니라, 프로그램에서 필요한 모든 데이터 캡처에 다시 사용할 수 있습니다.
우선,fetcher 구성 요소를 더욱 동적으로 만듭니다. 응용 프로그램의 사용자를 가져올 뿐만 아니라, 서로 다른 서비스 방법과 변수 이름이 필요한 각종 데이터를 가져와야 하기 때문입니다.
이를 위해 우리는 props를 사용하여 동적 내용을 구성 요소에 전달할 것이다.

<template>
  <div>
    <div v-if="loading">
      Loading...
    </div>
    <div v-else-if="error">
      {{ error }}
    </div>
    <slot v-else :data="data" />    
  </div>
</template>

export default {
  name: 'Fetcher',
  props: {
    apiMethod: {
      type: Function,
      required: true
    },
    params: {
      type: Object,
      default: () => {}
    },
    updater: {
      type: Function,
      default: (previous, current) => current
    },
    initialValue: {
      type: [Number, String, Array, Object],
      default: null
    }
  }
}

위의 각 아이템을 분석합니다.apiMethod [required]: 외부 데이터를 가져오는 서비스 함수params [optional]:fetch 함수에 보내는 매개 변수입니다.예: 필터를 사용하여 데이터를 가져올 때updater [optional]: 필요하면 결과를 얻는 함수를 변환합니다.initialValue [optional]: 상태 대상의 속성data의 초기값.
필요한 도구를 실현한 후에 구성 요소를 다시 사용할 수 있는 주요 메커니즘을 인코딩합니다.정의된 도구를 사용하면 얻은 결과에 따라 구성 요소의 상태를 설정하고 제어할 수 있습니다.

<template>
  <div>
    <div v-if="loading">
      Loading...
    </div>
    <div v-else-if="error">
      {{ error }}
    </div>
    <slot v-else :data="data" />    
  </div>
</template>

export default {
  name: 'Fetcher',
  props: {
    apiMethod: {
      type: Function,
      required: true
    },
    params: {
      type: Object,
      default: () => {}
    },
    updater: {
      type: Function,
      default: (previous, current) => current
    },
    initialValue: {
      type: [Number, String, Array, Object],
      default: null
    }
  },
  data() {
    return {
      loading: false,
      error: null,
      data: this.initialValue
    }
  },
  methods: {
    fetch() {
      const { method, params } = this
      this.loading = true

      try {
        method(params)
      } catch (error) {
        this.error = error
      } finally {
        this.loading = false
      }
    }
  } 
}

따라서 이러한 변경이 이루어진 후에 새로운 Fetcher 구성 요소를 사용할 것입니다.

<template>
   <Fetcher :apiMethod="fetchUsers">
     <template #default="{ data }">
       <table>
         <tr>
           <th>ID</th>
           <th>Name</th>
           <th>Age</th>
         </tr>
         <tr v-for="user in data" :key="user.id">
           <td>{{ user.id }}</td>
           <td>{{ user.name }}</td>
           <td>{{ user.age }}</td>
         </tr>
       </table>
     </template>
   </Fetcher>
</template>

import Fetcher from '@/components/Fetcher'
import { fetchUsers } from '@/services/users'

export default {
  name: 'UsersList',
  components: {
    Fetcher
  },
  methods: {
    fetchUsers
  }
}

이렇게도구와 슬롯 같은 기본적인 VueJS 개념을 사용하면 API에서 데이터를 검색하고 응용 프로그램 사용자에게 적절한 피드백을 제공할 수 있는 리셋 가능한 캡처 구성 요소를 만들 수 있습니다.
한 페이지에서 여러 번 사용할 수 있으며, 필요에 따라 다른 데이터를 얻을 수 있습니다.
이 구현의 전체 작업 예는 this repo에서 찾을 수 있습니다.
니가 좋아했으면 좋겠어.댓글과 공유를 올려주세요!
대단히 감사합니다
본문의 오류 코드를 복구하는 데 도움을 주셔서 감사합니다.
표지 사진 작성자nordwood