Ведро семейства Vue --- использование и вторичная упаковка axios

axios

1. Предпосылки

2. Использование аксиом и настройки перехватчика.

  1. установить аксиомы
cnpm i axios -S
  1. Создайте новую папку http, создайте новый файл index.js, config.js
  2. Axios инкапсулирован в config.js для перехвата запросов (в основном используется для настройки токена и типа данных запроса) и перехвата ответов (в основном используется для глобальной обработки кодов состояния http и внутренних пользовательских кодов).
  3. Импортируйте config.js в файл index.js и смонтируйте его в цепочке прототипов vue (его также можно смонтировать в объекте экземпляра vue, который можно пропустить по запросу).
  4. Введите конфигурацию в main.js, если она показана:
  5. Нажмите кнопку, чтобы получить данные меню. Здесь экспресс используется для запуска службы и инкапсуляции API-интерфейса меню для имитации фактической сцены.
  6. Нажмите кнопку, эффект будет таким, как показано на рисунке.

3. Централизованное управление API и справочная информация по требованию.

  1. Централизованное управление и ссылки по запросу на API облегчают управление проектами и рефакторинг, снижают нагрузку на экземпляры Vue и оптимизируют производительность проекта.
  2. Раньше мы напрямую монтировали упакованные аксиомы в цепочку прототипов vue, а затем использовали их в компоненте с помощью this.$axios.get(), теперь немного модифицируем.
  3. Удалите require('./http') из main.js, измените файл index.js в http и измените ссылку на интерфейс в home.vue. как показано на рисунке:
  4. Теперь мы возвращаемся на страницу и обнаруживаем, что эффект такой же, как и раньше.

4. Резюме

  • Вторичная инкапсуляция axios может унифицировать типы данных запроса/ответа для интерфейсных и внутренних взаимодействий, единообразно обрабатывать коды ошибок http и пользовательские коды и избегать частых суждений в компонентах и ​​путаницы при использовании кодов кода.
  • Централизованное управление и ссылка на API по запросу полезны для управления проектами и рефакторинга, повторного использования кода, а API можно разделить на модули в фактической разработке проекта с четкой структурой.