В этом посте я покажу, как использовать функции axios transformRequest и transformResponse для преобразования snake case в camel case для использования в вашем приложении Vue / Vuex.
Исходный код статьи можно найти здесь.
За последние несколько лет я работал над бесчисленным количеством приложений Vue и React, которые поддерживаются API-интерфейсами, созданными с использованием таких языков, как Python, Ruby и Perl. По соглашению, многие серверные языки используют snake case для переменных и функций. Это часто означает, что я вижу магазины Vuex, которые выглядят так:
Сочетание snake case для данных, определенных на сервере, и camel case для данных, определенных во внешнем интерфейсе. Хотя в этом нет ничего плохого, строго говоря, легко изменить ответ, если вы используете axios, один из самых популярных HTTP-клиентов в последние годы. Поступая так, ваша кодовая база может следовать соглашению JavaScript camel case, и ваш сервер не станет мудрее. Согласованность важна - это поможет вашему приложению быть более масштабируемым и более простым в обслуживании в долгосрочной перспективе.
В этой статье я буду преобразовывать между snake case и camel case, однако эта концепция применима к серверам, использующим другие соглашения, такие как Pascal Case.
Приложение
Во-первых, очень простое приложение Vue / Vuex с двумя действиями: getUsers и updateUsers. getUsers получает простой JSON, отформатированный в snake case, и updateUsers отправляет данные обратно. Конечная цель - преобразовать ответ от запроса getUsers в camel case и преобразовать его обратно в snake case при публикации с updateUsers.
Он скомпилирован с помощью webpack, index.html просто имеет тег <script>, загружающий пакет, и <div id="app">/div>.
Преобразование запроса с transformRequest
У меня есть сервер, который возвращает ответ в такой форме:
В настоящее время приложение и вывод выглядят следующим образом:
Я хочу преобразовать все ключи (в данном случае first_name) в случай верблюда. Я могу использовать пакет camelcase-keys от npm в сочетании с transformResponse. Обновленное действие выглядит так:
Sinc data - это строковый объект JSON, нам нужно использовать JSON.parse перед вызовом camelcaseKeys. Теперь вывод выглядит следующим образом:
Поскольку мы использовали параметр { deep: true }, ключи любых вложенных объектов также будут преобразованы.
Преобразование ответа с помощью transformResponse
Когда мы вызываем updateUsers, мы хотим преобразовать ответ обратно в случай змеи, чтобы сервер правильно интерпретировал данные. Это почти то же самое, что и предыдущая операция. Новое действие updateUsers выглядит так:
Поскольку запрос уже является допустимым объектом JSON, мы не вызываем JSON.parse. Скорее, нам нужно JSON.stringify это, поскольку тело запроса POST должно быть строкой. Щелчок по Обновить данные и проверка вкладки сети показывает, что полезная нагрузка ответа была преобразована обратно в змеиную форму:
Глобальная настройка Axios
Если вы хотите применить преобразования ко всем запросам и ответам, вы можете сделать это глобально следующим образом:
Это позволит вам полностью кодировать приложение, используя обычное соглашение JavaScript о верблюжьем случае, а код на стороне сервера может продолжать работать в случае змеи.
Исходный код статьи можно найти здесь.
Изначально опубликовано в моем личном блоге.
