логотип PurpleSchool
  • Бесплатно
      Карта развитияОсновы разработкиCSS Flexbox
    • Новостные рассылкиИконка стрелки
    • База знанийИконка стрелки
    • Карьерные пути
      • Frontend React разработчик
      • Frontend Vue разработчик
      • Backend разработчик Node.js
      • Fullstack разработчик React / Node.js
      • Mobile разработчик React Native
      • Backend разработчик Golang
      • Devops инженер
    • О нас
      • Отзывы
      • Реферальная программа
      • О компании
      • Контакты
    • Иконка открытия меню
      • Сообщество
      • PurpleПлюс
      • AI тренажёр
      • Проекты
    логотип PurpleSchool
    ютуб иконка
    Telegram иконка
    VK иконка
    Курсы
    ГлавнаяКаталог курсовFrontendBackendFullstack
    Практика
    КарьераПроектыPurpleПлюс
    Материалы
    БлогБаза знаний
    Документы
    Договор офертаПолитика конфиденциальностиПроверка сертификатаМиграция курсовРеферальная программа
    Реквизиты
    ИП Ларичев Антон АндреевичИНН 773373765379contact@purpleschool.ru

    PurpleSchool © 2020 -2025 Все права защищены

  • Курсы
    Иконка слояПерейти в каталог курсов
    • FrontendИконка стрелки
    • BackendИконка стрелки
    • DevOpsИконка стрелки
    • MobileИконка стрелки
    • ТестированиеИконка стрелки
    • Soft-skillsИконка стрелки
    • ДизайнИконка стрелки
    • Картинка группы Общее

      Общее


      • Основы разработки
      • Основы Git
      • HTML и CSS
      • CSS Flexbox
      • Основы JavaScript
      • Продвинутый JavaScript
      • TypeScript с нуля
      • Neovim
    • Картинка группы React

      React


      • React и Redux Toolkit
      • Zustand
      • Next.js - с нуля
      • Feature-Sliced Design
    • Картинка группы Vue.js

      Vue.js


      • Vue 3 и Pinia
      • Nuxt
      • Feature-Sliced Design
    • Картинка группы Angular

      Angular


      • Angular 19 Иконка курсаСкоро!
    • Картинка группы Node.js

      Node.js


      • Основы Git
      • Основы JavaScript
      • Telegraf.js Иконка курсаСкоро!
      • Продвинутый JavaScript
      • TypeScript с нуля
      • Node.js с нуля
      • Nest.js с нуля
    • Картинка группы Golang

      Golang


      • Основы Git
      • Основы Golang
      • Продвинутый Golang
      • Golang - Templ Fiber HTMX
    • Картинка группы C#

      C#


      • Основы C#
    • Картинка группы Python

      Python


      • Основы Python
      • Продвинутый Python Иконка курсаСкоро!
    • Картинка группы PHP

      PHP


      • Основы PHP Иконка курсаСкоро!
    • Картинка группы Общее

      Общее


      • Основы разработки
      • Docker и Ansible
      • Kubernetes и Helm
      • Микросервисы
      • Neovim
    • Картинка группы Общее

      Общее


      • Основы разработки
      • Основы Git
      • Основы Linux
      • Bash скрипты
      • Docker и Ansible
      • Kubernetes и Helm
      • Микросервисы
      • Neovim
    • Картинка группы Общее

      Общее


      • Основы разработки
      • Основы Git
      • Neovim
    • Картинка группы React Native

      React Native


      • HTML и CSS
      • Основы JavaScript
      • Продвинутый JavaScript
      • TypeScript с нуля
      • React и Redux Toolkit
      • React Native и Expo Router
    • Картинка группы Flutter

      Flutter


      • Основы Flutter Иконка курсаСкоро!
    • Картинка группы Swift

      Swift


      • Основы Swift и iOS
    • Картинка группы Общее

      Общее


      • Продвинутое тестирование Иконка курсаСкоро!
      • Основы тестирования ПО
    • Картинка группы Общее

      Общее


      • Собеседование
      • Современный Agile
    • Картинка группы Figma

      Figma


      • Основы дизайна
  • логотип PurpleSchool
    • Сообщество
    • PurpleПлюс
    • AI тренажёр
    • Проекты
    Главная
    Сообщество
    Валидация данных из внешнего API

    Валидация данных из внешнего API

    Аватар автора Валидация данных из внешнего API

    Антон Ларичев

    Иконка календаря30 сентября 2022

    Как на frontend, так и на backend нам приходится работать с внешним API. Особенную боль доставляют внешние API, которые не привязаны к вашему релизному циклу и могут меняться как бог на душу положит. Поэтому хорошо иметь способ из валидировать без лапши кода.

    Для примера, допустим мы стучимся в сервис, который выдаёт нам информацию о нашем подписчике - его email и подписан он или нет. Нам нужно для дальнейшей работы обеспечить наличие этих двух полей. Идём в тупую!

    const getData = async () => {
        const { data } = await axios.get('https://my-api/1');
        if(!data.email) {
            throw new Error('Нет адреса почты');
        }
        if (!data.isSubscribed) {
            throw new Error('Нет информации о подписке');
        }
        return data;
    }
    

    В целом выглядит не очень страшно... пока у нас 2 поля. А представьте 10 или 20? А если будут вложенные структуры 🤯? К тому же мы тут ещё не проверили, что почта имеет корректный формат. Как бы хотелось иметь более декларативный способ обработки ошибок! И он есть: class-validator.

    Если вы работали с NestJS, то наверняка с ним неявно сталкивались при написании pipes. Давайте его тут используем.

    Шаг 1: опишем наш приходящий класс:

    class ExternalData {
        constructor(data: ExternalData) {
            Object.assign(this, data);
        }
    
        email: string;
        isSubscribed: boolean;
    }
    

    Шаг 2: Теперь давайте докинем ему декораторов, которые будут описывать нужные данные:

    import { IsBoolean, IsEmail, IsString } from 'class-validator';
    
    class ExternalData {
        constructor(data: ExternalData) {
            Object.assign(this, data);
        }
    
        @IsString({ message: 'Нет адреса почты' })
        @IsEmail({}, { message: 'Неверный формат адреса почты'})
        email: string;
    
        @IsBoolean({ message: 'Нет информации о подписке'})
        isSubscribed: boolean;
    }
    

    В каждом из них мы можем прописать дополнительные опции, в том числе своё сообщение об ошибке, если оно необходимо. Мы фактически описали все наши данные по их формату и типу за 3 строчки код (класс бы нам всё равно нужен был в виде интерфейса для получения данных).

    Конструктор класса нам будет необходим для быстрого создания инстанса с пришедшими данными.

    Шаг 3: Magic!

    import { validate } from 'class-validator';
    
    const getData = async () => {
        const { data } = await axios.get('https://my-api/1');
        validate(new ExternalData(data)).then(errors => {
            if (errors.length > 0) {
                // Пришедшие данные не верны
            } else {
                // Всё верно!
            }
        });
    }
    

    В результате нам достаточно просто вызвать validate для инстанса класса и в errors мы получим список ошибок с текстом и указанием где именно оно произошло. Всё! Наш класс прошёл валидацию, и мы можем спокойно с ним работать. Если нет - отправляем ошибки интерации в лог или внешнюю систему, чтобы оповестить разработчиков, что злые разработчики стороннего API опять строят нам козни!

    Иконка глаза1 940

    Комментарии

    0

    Постройте личный план изучения Основы разработки до уровня Middle — бесплатно!

    Основы разработки — часть карты развития Frontend, Backend, Mobile

    • step100+ шагов развития
    • lessons30 бесплатных лекций
    • lessons300 бонусных рублей на счет

    Бесплатные лекции

    Лучшие курсы по теме

    изображение курса

    Основы Git

    Антон Ларичев
    AI-тренажеры
    Гарантия
    Бонусы
    иконка звёздочки рейтинга4.9
    3 999 ₽ 6 990 ₽
    Подробнее
    изображение курса

    HTML и CSS

    Антон Ларичев
    AI-тренажеры
    Практика в студии
    Гарантия
    Бонусы
    иконка звёздочки рейтинга4.9
    3 999 ₽ 6 990 ₽
    Подробнее
    изображение курса

    CSS Flexbox

    Антон Ларичев
    Гарантия
    Бонусы
    иконка звёздочки рейтинга4.9
    бесплатно
    Подробнее
    Иконка чипа0