Как человек, в некоторой степени занимающийся серверным программированием ;-), работа с данными JSON стала для нас второй натурой. Мы часто прибегаем к использованию таких инструментов, как Postman, для тестирования наших API. Но давайте будем реалистами; встроенная визуализация Postman в формате JSON не самая интуитивно понятная. Это функционально, но оставляет желать лучшего. Раньше мы вручную копировали и вставляли данные JSON в онлайн-редактор JSON для лучшего просмотра, но этот процесс стал утомительным.
И тут нас осенило: почему бы не создать пользовательский визуализатор JSON прямо внутри Postman? Вот так мы в конечном итоге создали этот фрагмент кода, который интегрирует редактор JSON непосредственно во вкладку Визуализация Postman. Итак, давайте погрузимся в это и сделаем ваш опыт работы с Postman незабываемым!
Прежде чем перейти к коду, давайте рассмотрим, что такое Postman, особенно для новичков в серверной разработке. Postman – популярный инструмент, используемый разработчиками для тестирования запросов API. Хотя он предоставляет множество функциональных возможностей, он не подходит для эффективной визуализации данных JSON. Postman предлагает только базовое сворачивание данных на уровне кода и не может сразу показать вам конкретное количество элементов внутри списка.
Прежде всего, вам нужно решить, где вы хотите реализовать эту пользовательскую визуализацию. Вы можете настроить его либо для одного запроса API, либо для целой коллекции API. Вот как запустить его:
ПримечаниеВы также можете реализовать это для одного запроса API. Просто вставьте код на вкладку “Тесты” этого конкретного запроса.
Первая часть кода определяет функцию JavaScript с именем isJsonString(). Эта функция принимает строку в качестве аргумента и возвращает, true если строка является допустимым объектом JSON, и false в противном случае.
// Функция для проверки того, может ли строка быть преобразована в объект JSON const isJsonString = (str) => { try { JSON.parse(str); return true; } catch (e) { return false; } };
Затем мы определяем функцию getResponseJson(). Он проверяет, является ли текст ответа API допустимым объектом JSON, используя isJsonString() функцию. Если это так, он возвращает проанализированный объект JSON; в противном случае он оборачивает обычный текст в объект JSON.
// Функция для получения ответа JSON или обертывания обычного текстового ответа в объект JSON const getResponseJson = (responseText) => { return isJsonString(responseText) ? pm.response.json() : { '_PAYLOAD': responseText }; };
Ядро кода лежит в template переменной, которая содержит сочетание HTML и JavaScript, отображаемое на вкладке Визуализация Postman.
// HTML и JavaScript-код для рендеринга редактора JSON const template=' <meta charset="utf-8"> <!-- ... (опущено для краткости) --> <div id="jsoneditor" style="width: 100%; height: 100%;"></div> <script> // ... (опущено для краткости) editor.set(${resJsonString}); </script> ';
Мы используем библиотеку редактора JSON для отображения древовидного представления объекта JSON. editor.set()Метод – это то, где происходит волшебство; он берет объект JSON и визуально отображает его в виде дерева.
Вот весь код, который вам нужно будет вставить на тестовую вкладку Postman:
// Функция для проверки того, может ли строка быть преобразована в объект JSON const isJsonString = (str) => { try { JSON.parse(str); return true; } catch (e) { return false; } }; // Функция для получения ответа JSON или обертывания обычного текстового ответа в объект JSON const getResponseJson = (responseText) => { return isJsonString(responseText) ? pm.response.json() : { '_PAYLOAD': responseText }; }; const responseText = pm.response.text(); const responseJson = getResponseJson(responseText); const resJsonString = JSON.stringify(responseJson); // HTML и JavaScript-код для рендеринга редактора JSON const template = ` <meta charset="utf-8"> <!-- ... (omitted for brevity) --> <div id="jsoneditor" style="width: 100%; height: 100%;"></div> <script> // ... (omitted for brevity) editor.set(${resJsonString}); </script> `; pm.visualizer.set(template);
Этот простой фрагмент кода значительно улучшает визуализацию данных Postman в формате JSON. Это небольшая инвестиция с большой отдачей, которая экономит ваше время и делает процесс тестирования вашего API более интуитивно понятным. Так что вперед, интегрируйте его в свою среду Postman, и пусть волшебство развернется!