Управление пакетами Axios в Vue

Vue.js

Оболочка Vue Axios

определение

Axios — это HTTP-библиотека на основе обещаний, которую можно использовать в браузерах и node.js.

характеристика

  • Обещанная поддержка API
  • Перехват запросов и ответов
  • Преобразование данных запроса и данных ответа
  • Автоматически преобразовывать данные JSON
  • Клиент поддерживает XRSF

Вернуться к сути

При разработке проекта Vue мы больше всего занимались интерфейсом, как优雅的使用Axiosстать более важным.

Обычно мы получаем данные интерфейса, отправляя запросы от клиента к бэкенду, а затем идеально отображаем эти данные интерфейса на веб-странице.

При этом при работе с интерфейсом будут использоваться сетевые запросы, аVue Что такое комбинированные библиотеки сетевых запросов?

  • vue-resource
  • axiosОфициальная рекомендация
  • fetch

В этой главе будет использоваться axiosзавершить запрос интерфейса иaxiosИнкапсуляция запросов для развития бизнеса.

一次编写， 终身受用😁

Начинать

установить аксиомы

yarn add axios

Инкапсулировать http.js

Создайте отдельный файл для инкапсуляции аксиом, при инкапсуляции нужно и后端Заключить несколько соглашений,请求头,状态码, 请求超时时间.......

представлять必要的UI 提示框, разные коды состояния, вызывающие разные ответы,

请求头: Чтобы реализовать некоторые конкретные услуги, вы должны указать некоторые параметры, прежде чем вы сможете запросить(例如：会员业务)

状态码: По разнице, возвращаемой интерфейсомstatus, для выполнения другого бизнеса, это необходимо согласовать с серверной частью.

请求拦截器: определить, какие запросы могут получить доступ, на основе настроек заголовка запроса.

响应拦截器: Это основано на后端Возвращаемый код состояния определяет выполнение различных служб.

полный код

Настройте несколько доменных имен для запроса разных URL-адресов

Как правило, при самостоятельном написании проекта достаточно URL-адреса интерфейса. Однако в реальной разработке проекта проект может запрашивать URL-адреса разных серверов.В настоящее время мы просто настраиваем доменное имя интерфейса доступа, а затем интерфейсы разных доменных имен можно вызывать напрямую, изменяя объект, так что независимо от того, сколько разных Мы можем управлять и использовать интерфейс очень хорошо.

полный код

Теперь Axios Basic Package завершен, вы можете удовлетворить основные потребности бизнеса

axiosПосле завершения инкапсуляции следующим шагом будет инкапсуляция запросов отдельных бизнес-модулей, как разделить эту часть полностью на ваше усмотрение.个人风格,ниже перечислю 两种

业务需求注意:

  • 必须引入 http.js axios
  • 必须引入 base.jsадрес интерфейса
  • 必须在Vue 入口文件下，引入业务需求 api.js,并且将api挂载到Vue 原型上
  • 剩下就是写你对应的业务需求了
стиль 1

Все запросы пишутся вapi.jsПод файлом

полный код

Как это использовать?
глобальное креплениеapi.js
вызов бизнес-компонента
стиль 2

Могу新建对应组件模块的文件управлять соответствующими бизнес-запросами, чтобы была проблема с интерфейсом,定位错误快, и наконец ввести разные файлы в один апи, js, которым очень удобно управлять.

Как это использовать?

Упакованный и неупакованный

Нет пакета, полосы Axios

наконец

На данный момент Axios в основном завершил инкапсуляцию, а также инкапсулировал запрос бизнес-модуля, который в основном может удовлетворить основные потребности бизнеса. Если проекту нужны другие требования, его можно перепаковать на исходный.

После инкапсуляции, если проект изменен на доменное имя интерфейса, просто вызовите объект доменного имени в base.js.

Категории