Как лучше управлять интерфейсами API в "The Front Ends"

внешний интерфейс
❝

Фронт-конце: поскольку передний и задний конец разделены, док-станция переднего и заднего интерфейса стал обычным явлением, «кто» не может быть отделен друг от друга, и процесс стыковки интерфейса Неотделимый из интерфейсного документа, тем больше основного является Swagger (мощный документ API)), конечно же сегодня не является главным героем, несомненно, это поддерживает. Эта статья направлена ​​на сортировку того, как лучше управлять интерфейсом «стыковка» с задней частью в интерфейсных проектах

❞

Разговор об управлении интерфейсом неотделим от библиотеки запросов.Самая обсуждаемая библиотека запросов в стеке технологий vue — это axios.Давайте сначала реорганизуем axios.

1.axios

❝

axios — это HTTP-клиент на основе Promise для браузеров и nodejs.Шуцзян выбрал три функции, которые особенно полезны.

❞

1.1 Поддержка запроса на отмену (cancelToken)

❝

Сценарий приложения: когда пользователь обновляет запрос данных, если список запросов, который вы инициировали ранее, не ответил, если вы повторно инициируете запрос в это время, будет второй запрос, и вы можете отменить предыдущий запрос через cancelTokenРабота с документацией

❞

Итак, как реализован cancelToken, вы можете прочитать исходный код, ссылка на исходный коднажми на меняЗаинтересованные студенты могут прочитать этопринцип отмены токена аксиомы

2. Поддержка Promise API (axios.all, axios.spread и т. д.)

❝

Сценарий приложения: когда я хочу инициировать несколько запросов одновременно, axios.all, аналогичный (promise.all), дает мне хороший опыт и решает сценарий приложения с одновременными запросами.

❞

3. Перехватчик (перехват запросов и возвратов)

❝

Сценарий приложений: когда несколько интерфейсов в проекте требуют передней части для передачи идентификатора пользователя, проверьте токен и т. Д. Через заголовок мы можем добавить их равномерно. Аналогично, когда на интерфейсе ненормальный статус происходит на интерфейсе, например, 401 (Истек срок действия входа в систему), его необходимо сбросить. Когда направлено на страницу входа в систему, нам нужно равномерно добавить обработку равномерно, и перехватчик играет важную роль в это время.

❞

Что ж, без лишних слов, давайте перейдем к сегодняшней теме: как лучше управлять интерфейсами API.

2. Управление API

2.1 Метод 1: в соответствии с методом упаковки модуля

❝

Через функциональные модули, определенные документом swagger, определяются службы различных модулей, а также инкапсулируются такие методы, как добавление, удаление, изменение и инкапсуляция интерфейсов.

❞
  • Создать каталог по модулю документации интерфейса swagger
  • Написание методов модулей (например, пользовательских модулей)
❝

Здесь используется ранее упакованная библиотека kdutilссылка на гитхабМетод http в основном является вторичной инкапсуляцией axios, а разные методы запросов инкапсулируются через разные операции API.

❞
  • Экспортировать все написанные модули

После того, как мы инкапсулировали документы интерфейса Swagger, соответствующие различным модулям, мы можем экспортировать и установить каждый модуль в качестве подключаемого модуля для монтирования.Экспорт модуля использует метод require.context, упакованный веб-пакетом, который импортируется по указанному пути и сопоставляется на ссылку на модуль, как показано ниже👇

Чтобы эти модули можно было использовать непосредственно в Vue, мы внедряем экспортированные модули в компонент Vue, «подвешивая» Vue.prototype, тем самым добавляя свойство прототипа к объекту Vue вместо глобальной переменной.

Это связано с использованием плагинов Vue. Плагины Vue обычно используются для выполнения следующих операций.

  • Добавьте глобальный метод или свойство. Например: vue-пользовательский-элемент

  • Добавляйте глобальные ресурсы: директивы/фильтры/переходы и т.д. например, vue-touch

  • Через глобальный микс, чтобы добавить некоторые компоненты. Как vue-маршрутизатор

  • Добавить метод примера Vue, реализованный путем добавления их в Vue.prototype. (Эта операция используется выше)

  • Библиотека, которая предоставляет собственный API, предоставляя при этом одну или несколько функций, упомянутых выше. например vue-маршрутизатор

Плагины Vue.js должны предоставлять метод установки. Первый параметр этого метода — конструктор Vue, а второй параметр — необязательный объект параметров, который анализируется следующим образом.

Наконец, используйте плагин через глобальный метод Vue.use() в main.js, как показано ниже👇

  • Как позвонить в проект

Поскольку он уже смонтирован на прототипе объекта vue, вы можете использоватьthis.$apiмодуль расстройки

❝

Когда вы говорите об этом, вы можете задаться вопросом, ваш путь к интерфейсу неверен, как это относительный путь? На самом деле путь прописан в axios.create, как показано ниже👇

❞

и этоprocess.env.VUE_APP_URLЧто это такое?

❝

Именно через файлы конфигурации различных сред (запрос API, другая конфигурация и т. д.), определенные разными средами (разработка, тестирование, производство), вы можете увидеть детали дерева.«Развертывание проекта на основе Vue-cli 3x»введение

❞

Резюме: Преимущество этого метода заключается в том, что он может напрямую идентифицировать соответствующие методы добавления, удаления, изменения и проверки интерфейса, и он монтируется в прототип объекта vue для легкого вызова.Это понятно с первого взгляда.Недостатком является что еще слишком много повторяющихся кодов. таким образом

2.2 Способ 2. Написать API в соответствии с документом API

❝

Первый метод, упомянутый в предыдущем разделе, экспорт по сути является методом, а в какой форме второй метод?Ответ заключается в экспорте файла конфигурации

❞
  • Сначала "о таланте", сначала укажите структуру каталогов
❝

Определив API в папке конфигурации, он делится на разные модули.Ниже приведен пример пользовательского модуля.

❞
  • Написать API по модулю
  • Экспорт всех записанных конфигураций API
❝

Как и модуль экспорта в предыдущем разделе, используется require.context, а затем комбинируется с методом Object.defindproperty для изменения свойств объекта и возврата нового пути API.

❞
  • Расширение: Object.defineProperty

Немного об Object.defineProperty.

❝

Введение в MDN: определите новое свойство непосредственно в объекте или измените существующее свойство объекта и верните этот объект.

❞

Три значения, соответствующие Object.defineProperty

  • obj Объект, для которого определяется свойство.
  • prop Имя свойства, которое необходимо определить или изменить.
  • descriptor Дескриптор свойства, который необходимо определить или изменить.

Пример такой👇

Мы видим, что в дескрипторе, то есть в третьем параметре есть поле перечисляемое, которое называется перечислимым свойством объекта описания, которое мы называем «перечисляемость»

В чем разница между перечислимостью и неперечислимостью? Если посмотреть на следующий пример, должно быть понятно, что если он не перечислимый, то он не будет отображаться, и наоборот, то есть, когда перечислимый равен false, будут возвращены только перечисляемые свойства данного объекта.

Те же следующие методы также являются той же идеей (возвращают только самоперечисляемые свойства данного объекта)

Случайно снова пошло не так, вернемся к теме, после того, как мы успешно экспортировали файл конфигурации API, следующий шаг - как его использовать

  • как использовать

Смонтируйте конфигурацию на прототипе объекта vue.

Правильная поза вызова:

На этом все, спасибо, если у вас есть лучший способ, пожалуйста, оставьте свое ценное мнение, большое спасибо.

❝

Шуцзян надеется доставить удовольствие от внешнего интерфейса всем. Эта статья была включенаGitHub.com/маленькое дерево М…звездочка если хочешь ✨

❞

Прошлые статьи

Пожалуйста, выпейте 🍵 Не забудьте подключиться три раза~

1. После прочтения не забудьте поставить лайк 🌲 соусу, там есть 👍 и мотивация

2. Обратите внимание на интересные вещи в интерфейсе официального аккаунта и пообщайтесь с вами об интересных вещах в интерфейсе.

3. Статья размещена на GithubfrontendThingsСпасибо, Стар✨

Категории