Побудова клієнта для REST API

class ApiError extends Error {
  constructor(message, {
    status,
    statusText,
    url,
    data,
    headers,
  }) {
    super(message);

    this.name = "ApiError";
    this.status = status;
    this.statusText = statusText;
    this.url = url;
    this.data = data;
    this.headers = headers;
  }
}

class ApiTimeoutError extends Error {
  constructor(url, timeoutMs) {
    super(`Запит перевищив тайм-аут ${timeoutMs} мс: ${url}`);

    this.name = "ApiTimeoutError";
    this.url = url;
    this.timeoutMs = timeoutMs;
  }
}

function createApiClient({
  baseUrl,
  getToken,
  defaultHeaders = {},
  timeoutMs = 10_000,
} = {}) {
  if (!baseUrl) {
    throw new Error("Параметр baseUrl є обов'язковим");
  }

  const normalizedBaseUrl = baseUrl.endsWith("/")
    ? baseUrl
    : `${baseUrl}/`;

  function buildUrl(path, query) {
    const normalizedPath = String(path).replace(/^\/+/, "");
    const url = new URL(normalizedPath, normalizedBaseUrl);

    if (query) {
      for (const [key, value] of Object.entries(query)) {
        if (value === undefined || value === null) {
          continue;
        }

        if (Array.isArray(value)) {
          for (const item of value) {
            url.searchParams.append(key, String(item));
          }
        } else {
          url.searchParams.set(key, String(value));
        }
      }
    }

    return url;
  }

  async function parseResponse(response) {
    if (response.status === 204) {
      return undefined;
    }

    const text = await response.text();

    if (!text) {
      return undefined;
    }

    const contentType = response.headers.get("content-type") ?? "";

    if (
      contentType.includes("application/json") ||
      contentType.includes("+json")
    ) {
      try {
        return JSON.parse(text);
      } catch {
        // Якщо сервер заявив JSON, але повернув некоректний текст,
        // зберігаємо оригінальне тіло відповіді.
        return text;
      }
    }

    return text;
  }

  async function request(
    path,
    {
      method = "GET",
      query,
      headers,
      body,
      signal,
      ...fetchOptions
    } = {},
  ) {
    const url = buildUrl(path, query);
    const requestHeaders = new Headers(defaultHeaders);

    if (headers) {
      const customHeaders = new Headers(headers);

      for (const [key, value] of customHeaders.entries()) {
        requestHeaders.set(key, value);
      }
    }

    if (getToken && !requestHeaders.has("Authorization")) {
      const token = await getToken();

      if (token) {
        requestHeaders.set("Authorization", `Bearer ${token}`);
      }
    }

    let requestBody = body;

    const isFormData =
      typeof FormData !== "undefined" && body instanceof FormData;

    const isBlob =
      typeof Blob !== "undefined" && body instanceof Blob;

    const isUrlSearchParams =
      typeof URLSearchParams !== "undefined" &&
      body instanceof URLSearchParams;

    const isJsonObject =
      body !== null &&
      typeof body === "object" &&
      !isFormData &&
      !isBlob &&
      !isUrlSearchParams &&
      !(body instanceof ArrayBuffer);

    if (isJsonObject) {
      requestBody = JSON.stringify(body);

      if (!requestHeaders.has("Content-Type")) {
        requestHeaders.set("Content-Type", "application/json");
      }
    }

    const controller = new AbortController();
    let timeoutId;

    const abortFromCaller = () => {
      controller.abort(signal.reason);
    };

    if (signal) {
      if (signal.aborted) {
        controller.abort(signal.reason);
      } else {
        signal.addEventListener("abort", abortFromCaller, {
          once: true,
        });
      }
    }

    if (timeoutMs > 0) {
      timeoutId = setTimeout(() => {
        controller.abort();
      }, timeoutMs);
    }

    try {
      const response = await fetch(url, {
        ...fetchOptions,
        method,
        headers: requestHeaders,
        body: requestBody,
        signal: controller.signal,
      });

      const data = await parseResponse(response);

      if (!response.ok) {
        throw new ApiError(
          `HTTP-помилка ${response.status}: ${response.statusText}`,
          {
            status: response.status,
            statusText: response.statusText,
            url: response.url,
            data,
            headers: response.headers,
          },
        );
      }

      return data;
    } catch (error) {
      if (controller.signal.aborted && !signal?.aborted) {
        throw new ApiTimeoutError(url.toString(), timeoutMs);
      }

      throw error;
    } finally {
      clearTimeout(timeoutId);

      if (signal) {
        signal.removeEventListener("abort", abortFromCaller);
      }
    }
  }

  return {
    request,

    get(path, options = {}) {
      return request(path, {
        ...options,
        method: "GET",
      });
    },

    post(path, body, options = {}) {
      return request(path, {
        ...options,
        method: "POST",
        body,
      });
    },

    put(path, body, options = {}) {
      return request(path, {
        ...options,
        method: "PUT",
        body,
      });
    },

    patch(path, body, options = {}) {
      return request(path, {
        ...options,
        method: "PATCH",
        body,
      });
    },

    delete(path, options = {}) {
      return request(path, {
        ...options,
        method: "DELETE",
      });
    },
  };
}

// Приклад використання клієнта.
// Потрібен Node.js 18+ або середовище браузера.
const api = createApiClient({
  baseUrl: "https://jsonplaceholder.typicode.com",
  defaultHeaders: {
    Accept: "application/json",
  },
  timeoutMs: 5_000,
  getToken: async () => {
    // У реальному застосунку токен можна отримувати зі сховища
    // або оновлювати через окремий сервіс авторизації.
    return undefined;
  },
});

try {
  const posts = await api.get("/posts", {
    query: {
      userId: 1,
    },
  });

  console.log("Отримані записи:", posts);

  const createdPost = await api.post("/posts", {
    title: "Новий запис",
    body: "Текст запису",
    userId: 1,
  });

  console.log("Створений запис:", createdPost);
} catch (error) {
  if (error instanceof ApiError) {
    console.error("Помилка API:", {
      status: error.status,
      url: error.url,
      data: error.data,
    });
  } else if (error instanceof ApiTimeoutError) {
    console.error("Запит надто довго виконується:", error.url);
  } else {
    console.error("Непередбачена помилка:", error);
  }
}

const api = createApiClient({
  baseUrl: "https://api.example.com/v1",
});

api.get("/users");
api.get("/users/42");

api.get("/users", {
  query: {
    page: 2,
    limit: 20,
    role: "admin",
  },
});

https://api.example.com/v1/users?page=2&limit=20&role=admin

api.get("/reports", {
  query: {
    status: ["new", "processing"],
  },
});

/reports?status=new&status=processing

const api = createApiClient({
  baseUrl: "https://api.example.com",
  defaultHeaders: {
    Accept: "application/json",
    "X-Client-Version": "2.4.0",
  },
});

const result = await api.get("/profile", {
  headers: {
    "X-Request-ID": crypto.randomUUID(),
  },
});

const api = createApiClient({
  baseUrl: "https://api.example.com",
  getToken: async () => {
    return localStorage.getItem("access_token");
  },
});

Authorization: Bearer <token>

api.get("/public-data", {
  headers: {
    Authorization: "Basic some-value",
  },
});

JSON.stringify(body);

Content-Type: application/json

await api.post("/users", {
  name: "Olena",
  email: "olena@example.com",
});

{
  "name": "Olena",
  "email": "olena@example.com"
}

const formData = new FormData();

formData.append("title", "Документ");
formData.append("file", file);

await api.post("/documents", formData);

const user = await api.get("/users/42");

console.log(user.id);
console.log(user.name);

const healthStatus = await api.get("/health");

console.log(healthStatus);

if (!response.ok) {
  throw new ApiError(...);
}

{
  "message": "Користувача не знайдено",
  "code": "USER_NOT_FOUND"
}

try {
  await api.get("/users/999");
} catch (error) {
  if (error instanceof ApiError && error.status === 404) {
    console.log("Показати повідомлення про відсутнього користувача");
    console.log(error.data.message);
  } else {
    throw error;
  }
}

const api = createApiClient({
  baseUrl: "https://api.example.com",
  timeoutMs: 3_000,
});

const controller = new AbortController();

const request = api.get("/large-report", {
  signal: controller.signal,
});

setTimeout(() => {
  controller.abort();
}, 1_000);

try {
  const report = await request;
  console.log(report);
} catch (error) {
  if (error.name === "AbortError") {
    console.log("Запит скасовано користувачем");
  }
}

await api.get("/private-data", {
  cache: "no-store",
  credentials: "include",
});

const response = await fetch("/api/users");

try {
  return await response.json();
} catch {
  console.log("HTTP-запит неуспішний");
}

https://api.example.com/v1
https://api.example.com/v1/

function createUsersApi(api) {
  return {
    list({ page = 1, limit = 20 } = {}) {
      return api.get("/users", {
        query: { page, limit },
      });
    },

    findById(id) {
      return api.get(`/users/${encodeURIComponent(id)}`);
    },

    create(input) {
      return api.post("/users", input);
    },

    update(id, input) {
      return api.patch(`/users/${encodeURIComponent(id)}`, input);
    },

    remove(id) {
      return api.delete(`/users/${encodeURIComponent(id)}`);
    },
  };
}

const usersApi = createUsersApi(api);

const users = await usersApi.list({
  page: 1,
  limit: 10,
});