왜 구성요소에 Axios나 HTTP 호출을 사용하는 것이 좋지 않은 관행으로 여겨지는가?

왜 구성요소에 Axios나 HTTP 호출을 사용하는 것이 좋지 않은 관행으로 여겨지는가?

이 글에는 다음과 같이 적혀 있다.

일반적으로 좋지 않은 관행이지만 구성 요소에서 Axios를 직접 사용하여 방법, 라이프사이클 후크 또는 언제든지 데이터를 가져올 수 있다.

왜 그런지 궁금한데?나는 주로 데이터를 가져오기 위해 라이프사이클 후크를 많이 사용한다(특히 데이터로부터).created()). 요청 전화를 어디에 써야 할까?

글쓰기API컴포넌트에 직접 있는 방법은 코드 라인을 증가시키고 읽기 어렵게 만든다.내가 믿는 바로는author분리할 것을 제안하고 있다.API으로의 방법.Service.

당신이 가져와야 할 경우를 예로 들어보자.top posts그리고 데이터로 작동한다.만약 당신이 컴포넌트에서 그것을 다시 사용할 수 없다면, 당신은 그것을 사용하고자 할 때 그것을 다른 컴포넌트에 복제해야 한다.

export default {
  data: () => ({
    top: [],
    errors: []
  }),

  // Fetches posts when the component is created.
  created() {
    axios.get(`http://jsonplaceholder.typicode.com/posts/top`)
    .then(response => {
      // flattening the response
      this.top = response.data.map(item => {
         title: item.title,
         timestamp: item.timestamp,
         author: item.author
      })
    })
    .catch(e => {
      this.errors.push(e)
    })

  }
}

그러니 네가 가져가야 할 때top post다른 컴포넌트에서는 코드를 복제해야 한다.

자, 이렇게 하자.API methods의Service.

api.js file

const fetchTopPosts = function() {
  return axios.get(`http://jsonplaceholder.typicode.com/posts/top`)
        .then(response => {
          // flattening the response
          this.top = response.data.map(item => {
             title: item.title,
             timestamp: item.timestamp,
             author: item.author
          })
        }) // you can also make a chain.
}

export default {
   fetchTopPosts: fetchTopPosts
}

그래서 당신은 위의 것을 사용한다.API methods원하는 모든 구성 요소에서.

이 후:

import API from 'path_to_api.js_file'
export default {
      data: () => ({
        top: [],
        errors: []
      }),

      // Fetches posts when the component is created.
      created() {
         API.fetchTopPosts().then(top => {
            this.top = top
         })
         .catch(e => {
          this.errors.push(e)
         })

      }
    }

소형 앱이나 위젯은 괜찮지만 실제 SPA에서는 API를 자체 모듈로 추상화하고, vuex를 사용하는 경우에는 해당 api 모듈을 호출하는 동작을 이용하는 것이 좋다.

당신의 구성 요소는 그것의 데이터가 어떻게 그리고 어디에서 오는지에 대해 신경 쓰지 말아야 한다.구성 요소는 AJAX가 아닌 UI를 담당한다.

import api from './api.js'

created() {
  api.getUsers().then( users => {
    this.users = users
  })
}

// vs.

created() {
  axios.get('/users').then({ data }=> {
    this.users = data
  })
}

위의 예에서 "axios-free" 코드는 그리 짧지 않지만 구성 요소에서 보호할 수 있는 것이 무엇인지 상상해 보십시오.

• HTTP 오류 처리(예: 재시도)
• 구성 요소에 맞도록 서버에서 데이터를 미리 수집
• 헤더 구성(콘텐츠 유형, 액세스 토큰...)
• 만들기FormDataPOSTing용(예: 이미지 파일)

목록이 길어질 수 있다. 이 모든 것은 보기와 무관하기 때문에 구성요소에 속하지 않는다.보기에는 결과 데이터 또는 오류 메시지만 있으면 된다.

그것은 또한 당신이 당신의 구성 요소와 api를 독립적으로 테스트할 수 있다는 것을 의미한다.

참조URL: https://stackoverflow.com/questions/45839198/why-is-it-considered-poor-practice-to-use-axios-or-http-calls-in-components