vue.js - ¿Por qué se considera una mala práctica usar llamadas de Axios o HTTP en los componentes?

vuejs2

Question

En este artículo , dice:

Si bien es una práctica generalmente deficiente, puede usar Axios directamente en sus componentes para obtener datos de un método, un gancho del ciclo de vida o cuando sea.

Me pregunto por qué? Por lo general, uso mucho los enganches del ciclo de vida para recuperar datos (especialmente de created() ). ¿Dónde deberíamos escribir las llamadas de solicitud?

Answer 1

Escribir métodos de API directamente en componentes aumenta las líneas de código y dificulta su lectura. Por lo que creo que el author está sugiriendo separar los métodos API en un Service .

Tomemos un caso en el que tienes que buscar top posts y operar con datos. Si lo hace en el componente no es reutilizable, tiene que duplicarlo en otros componentes donde quiera que quiera usarlo.

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)
    })

  }
}

Por lo tanto, cuando necesite obtener top post en otro componente, debe duplicar el código.

Ahora pongamos los API methods en un 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
}

Por lo tanto, utiliza los API methods anteriores en los componentes que desee.

Después de este:

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)
         })

      }
    }

Answer 2

Está bien para aplicaciones o widgets pequeños, pero en un SPA real, es mejor abstraer su API en su propio módulo, y si usa vuex, use acciones para llamar a ese módulo api.

Su componente no debe preocuparse por cómo y de dónde provienen sus datos. El componente es responsable de la interfaz de usuario, no de AJAX.

import api from ''./api.js''

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

// vs.

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

En el ejemplo anterior, su código "libre de axios" no es realmente más corto, pero imagínese lo que potencialmente podría mantener fuera del componente:

• manejo de errores HTTP, por ejemplo, reintentar
• Preformatear los datos del servidor para que se ajuste a su componente.
• Configuración del encabezado (tipo de contenido, token de acceso ...)
• creando FormData para POSTing, por ejemplo, archivos de imagen

La lista puede alargarse. todo eso no pertenece al componente porque no tiene nada que ver con la vista. La vista solo necesita los datos resultantes o el mensaje de error.

También significa que puede probar sus componentes y api de forma independiente.