Features

TinyRequest API

TinyRequest is the request-focused feature introduced in the 1.7.0 docs story. It gives Tiny Engine apps a small client for structured API calls without dragging the rest of your UI code into fetch boilerplate.

Methods + Utilities

Each button calls a different TinyRequest feature against a local mocked API.

tiny-request.ts

import { TinyRequest } from "tiny-engine-pro";

const api = new TinyRequest({
  baseURL: "/api",
  headers: {
    Accept: "application/json",
  },
});

const users = await api.get("/users");
const created = await api.post("/users", {
  name: "Ada",
  role: "admin",
});

console.log(users.data, created.status);

CRUD

The CRUD group covers the everyday record actions: users in, users out, and users updated in place.

crud-buttons.ts

const api = new TinyRequest({ baseURL: "/mock-api" });

export async function handleGetUsers() {
  return api.get("/users");
}

export async function handlePostUser() {
  return api.post("/users", { name: "Ada", role: "admin" });
}

export async function handlePutUser() {
  return api.put("/users/1", { name: "Ada Lovelace", role: "owner" });
}

export async function handlePatchUser() {
  return api.patch("/users/1", { role: "editor" });
}

export async function handleDeleteUser() {
  return api.delete("/users/1");
}

Advanced

Advanced controls are for files, retries, cache management, and request cancellation when the basic verb helpers are not enough.

advanced-buttons.ts

const api = new TinyRequest({ baseURL: "/mock-api" });

export async function uploadFormData(file: File) {
  const formData = new FormData();
  formData.append("file", file);
  return api.post("/uploads", formData);
}

export async function cacheUsers() {
  return api.get("/users", { cache: true });
}

export function clearUsersCache() {
  api.clearCache("/users");
}

export async function retryFlakyApi() {
  return api.get("/flaky", { retry: 3 });
}

export async function abortSlowRequest(signal: AbortSignal) {
  return api.get("/slow", { signal });
}

export async function timeoutRequest() {
  return api.get("/slow", { timeout: 1500 });
}

Parsing

Parsing controls decide whether you want plain text, a raw transport response, or an untouched payload for custom handling.

parsing-buttons.ts

const api = new TinyRequest({ baseURL: "/mock-api" });

export async function parseText() {
  return api.get("/notes/1", { responseType: "text" });
}

export async function rawResponse() {
  return api.get("/users/1", { raw: true });
}

export async function parseFalse() {
  return api.get("/users/1", { parse: false });
}

Interceptors + Config

This group shows a configured instance, request and error interceptors, and a reset path for local mocked data between demo actions.

config-interceptors.ts

const api = new TinyRequest({
  baseURL: "/mock-api",
  headers: { "X-App": "tiny-engine" },
});

api.on("request", ({ url, method }) => {
  console.log("request", method, url);
});

api.on("response", ({ url, status }) => {
  console.log("response", status, url);
});

api.on("error", ({ message }) => {
  console.log("error", message);
});

export function configuredInstance() {
  return api.create({
    headers: { Authorization: "Bearer <token>" },
    timeout: 3000,
  });
}

export function errorInterceptor() {
  api.on("error", (error) => {
    if (error.status === 401) {
      console.log("auth expired");
    }
  });
}

export function resetMockData() {
  api.resetMockData();
}

Where it fits

Reach for TinyRequest when plain fetch() calls begin to repeat across screens. It is especially helpful for admin tables, request-heavy forms, settings panels, and feature pages that need one consistent API client.