VueCraft NPM

REST-запрос с toast-статусом: Rest Pipeline JS + Toast Kit ​

Задача, которая встречается в любом проекте с формами и API: пользователь нажимает «Сохранить», запрос уходит на сервер, и где-то на экране должно появиться «Сохраняем…», а потом «Сохранено» или текст ошибки — без ручного try/catch/finally вокруг каждого вызова.

Rest Pipeline JS уже даёт клиент с ретраями и кэшем. Toast Kit — toast.promise(), который сам переключает тип уведомления по результату промиса. Вместе — ноль ручной обвязки состояния загрузки.

Клиент и вызов ​

ts
import { createRestClient } from 'rest-pipeline-js'
import { toast } from 'vue-toast-kit'

const client = createRestClient({
  baseURL: 'https://api.example.com',
  retry: { attempts: 2, delayMs: 500, backoffMultiplier: 2 },
  auth: {
    getToken: async () => localStorage.getItem('token') ?? '',
  },
})

interface ProfileInput {
  name: string
  email: string
}

async function saveProfile(data: ProfileInput) {
  return toast.promise(client.patch('/profile', data), {
    loading: 'Сохраняем профиль…',
    success: 'Профиль сохранён',
    error: (err) => `Не удалось сохранить: ${(err as Error).message}`,
  })
}

toast.promise() возвращает тот же промис, что и передан ей на вход — await saveProfile(data) в обработчике формы работает как обычно, просто по пути пользователь видит статус.

Почему не просто try/catch ​

Ретраи createRestClient срабатывают ДО того, как промис вообще дойдёт до toast.promise() — если первая попытка упала по сети, но вторая (через delayMs) прошла, пользователь вообще не увидит ошибку, только «Сохраняем…» → «Сохранено». Тост реагирует на итоговый результат клиента, а не на каждую попытку внутри него — ретраи и обратная связь пользователю не мешают друг другу, потому что живут на разных уровнях.

Что дальше ​

  • Добавить circuitBreaker в createRestClient — если бэкенд упал совсем, тосты об ошибке не будут сыпаться на каждый клик, выключатель отклонит запросы локально. См. Rest Pipeline JS — обзор.
  • Для отмены сохранения — toast.undo() вместо toast.promise(), если операция обратима. См. useToast, toast.promise и toast.undo.