Асинхронная валидация

По умолчанию Valibot проверяет каждую схему синхронно. Обычно это самый быстрый способ проверить неизвестные данные, но иногда требуется выполнить проверку асинхронно. Например, может понадобиться проверить, существует ли уже имя пользователя в вашей базе данных.

Как это работает

Для этого Valibot при необходимости предоставляет асинхронную реализацию. Единственное отличие заключается в том, что асинхронная реализация основана на промисах. В остальном API и функциональность полностью совпадают.

Именование

Название асинхронной реализации начинается так же, как название синхронной, но в конце добавляется суффикс Async. Например, асинхронная реализация pipe называется pipeAsync, а асинхронная реализация object называется objectAsync.

Вложенность

Асинхронные функции можно вкладывать только в другие асинхронные функции. Это означает, что если вам нужно асинхронно проверить строку внутри объекта, необходимо также переключить проверку объекта на асинхронную реализацию.

В обратном направлении этого делать не требуется. В асинхронные функции можно вкладывать синхронные, и в большинстве случаев мы рекомендуем поступать именно так, чтобы свести к минимуму сложность и размер бандла.

Общее правило

Мы рекомендуем всегда начинать с синхронной реализации и при необходимости переводить на асинхронную только те части, которым это требуется. Если вы используете TypeScript, ошибиться здесь невозможно: наш API полностью типобезопасен и предупредит вас, если вы вложите асинхронную функцию в синхронную.

Пример

Предположим, вы хотите проверить объект профиля, причём имя пользователя нужно асинхронно проверить по вашей базе данных. Асинхронными должны быть только проверка объекта и проверка имени пользователя; остальное может остаться синхронным.

import * as v from 'valibot';
import { isUsernameAvailable } from '~/api';

const ProfileSchema = v.objectAsync({
  username: v.pipeAsync(v.string(), v.checkAsync(isUsernameAvailable)),
  avatar: v.pipe(v.string(), v.url()),
  description: v.pipe(v.string(), v.maxLength(1000)),
});