Почему считается неправильной практикой использования вызовов Axios или HTTP в компонентах?

В этой статье говорится:

В то время как в целом это плохая практика, вы можете использовать Axios непосредственно в своих компонентах для извлечения данных из метода, привязки жизненного цикла или когда-либо.

Мне интересно, почему? Обычно я использую многоцелевые крючки для извлечения данных (особенно из created()). Где мы должны писать запросы?

Ответ 1

Написание методов 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)
         })

      }
    }

Ответ 2

Это отлично подходит для небольших приложений или виджетов, но в реальном SPA лучше убрать ваш API в свой собственный модуль, а если вы используете vuex, используйте действия для вызова этого модуля api.

Ваш компонент не должен заботиться о том, как и откуда его данные поступают. Компонент отвечает за пользовательский интерфейс, а не AJAX.

import api from './api.js'

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

// vs.

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

В приведенном выше примере ваш "без аксиомы" код на самом деле не намного короче, но изображение того, что вы потенциально могли бы оставить вне компонента:

обработка ошибок HTTP, например, повторная попытка
предварительная форматирование данных с сервера, чтобы он соответствовал вашему компоненту
конфигурация заголовка (тип контента, токен доступа...)
создание FormData для POST, например файлов изображений

список может затянуться. все это не относится к компоненту, потому что оно не имеет ничего общего с представлением. Для просмотра требуется только получение данных или сообщение об ошибке.

Это также означает, что вы можете самостоятельно тестировать свои компоненты и api.