@yj01jung/httpclient

HttpClient

Fetch based modern http client for web, nodejs, deno

// index.ts
import http from "@yj01jung/httpclient";

http.baseURL("https://api.example.com/");

const data = await http.post<FooResponse>("foo/baz", {
  json: { foo: [1, 2, 3, 4, 5] },
  query: { query: "welcome" },
  headers: { "Foo-Bar": "httpclient" },
});

Features

Light

• Only 2kb(gzipped, all middlewares included) for modern environment
• Tree shaking enabled (core is 1kb)

TypeScript Support

• All core library, middlwares is statically typed

Middlwares

• You can add your powerful middlewares
• We already built timeout, auth middlwares

Automatic Mocking

• in non-browser environment, user-agent is automatically set to latest Chrome

TypeScript Support

• All core library, middlwares is typed

Usage

Default Client

We already built global HttpClient singleton like axios

import http from "@yj01jung/httpclient";
// default import

const json = await http.get<TodoResponse>(`todos/1`); // json

const text = await http.get(`hello.txt`).text(); // string
const binary = await http.get(`images.png`).binary(); // Uint8array

Sending Data

json

await http.post<RegisterResponse>(`/register`, {
  json: { foo: 1, bar: 2 },
});

form-data

// single file
const [myFile] = event.target.files;
await http.post<UploadResult>(`/upload-single-file`, {
  form: { foo: 1, myFile },
});

// multiple file
await http.post<UploadResult>(`/upload-multiple-file`, {
  form: { files: event.target.files },
});

Setting Headers and URL

import http from "@yj01jung/httpclient";

// request specific
http.get("/endpoint", {
  baseURL: "https://api.example.com/"
  headers: {
    "x-custom-headers": foo,
  },
});

// applied to all requests
http.baseURL("https://api.example.com/")

http.headers("x-custom-header", foo);
http.headers({
  referer: "https://example.com",
  "user-agent": randomUserAgent(),
});

Middlwares

Recommend Usage (creating new client instance)

import { createClient, timeout } from "@yj01jung/httpclient";

const client = createClient(timeout(3000), myMiddlware({ foo: "bar" }));

Discouraged (express like usage, not typed)

import http, { timeout } from "@yj01jung/httpclient";

http.use(timeout(3000));
http.use(myMiddlware({ foo: "bar" })

Timeout Middleware

Global timeout

// 1000 ms global timeout
const http = createClient(timeout(1000));

// request specitific timeout

http.get("/slow", { timeout: ms("1min") });

Auth middleware

Simplifies JWT (token based auth)

const http = createClient(auth());

// token is automatically parsed and saved
await http.post<LoginResponse>("/auth/login", { json: { id: "user", pw: "pass" } });

console.log(http.storage.token); // Bearer eyJhbGciOiJIUzUx...

await http.get("/auth/refresh");
await http.get<MyPrivateData>("/my/private");

Error Handling

Unlike default Fetch, non-successful(400x 500x) status will throw HttpError

try {
  await http.get("https://www.google.co.kr/404").text()
} catch (e) {
  console.log(e) // HttpError: 404 Not Found
  console.log(e instanceof HttpError) // true
  console.log(e.status) // 404
  console.log(e.statusText) // Not Found
}

Deno support

import http from "https://esm.sh/@yj01jung/httpclient@1.0.2";
console.log(await http.get("https://dl.deno.land/release-latest.txt").text());

V2 Roadmap

• Electron support
• GraphQL support

Changelog

v1.0.3

• fix HttpError

v1.0.2

• fix deno typing

1.0.0

• First release

License

MIT