totte

Totte is a lightweight JavaScript HTTP client based on Fetch API, which can be used in any runtime that supports fetch.

Read this in other languages: English | 简体中文

Installation

[!IMPORTANT] Totte is a pure ESM package, if you encounter difficulties using it in your project, can read this.

CDN

<script type="module">
  import totte from 'https://esm.sh/totte';
</script>

or

<script type="importmap">
  {
    "imports": {
      "totte": "https://esm.sh/totte"
    }
  }
</script>
<script type="module">
  import totte from 'totte';
</script>

You can also use other CDNs according to your preferences, such as jsDelivr and UNPKG.

NPM

npm install totte

Usage

import totte from 'totte';

const result = await totte('https://api.yuki.sh/ping');

console.log(result);
// -> { status: 200, data: 'Ciallo～(∠·ω< )⌒★', ... }

You can also use class or create to create new instance:

import totte from 'totte';

const request = totte.create({
  origin: 'https://api.yuki.sh',
});
const result = await totte('/ping');

import { Totte } from 'totte';

const request = new Totte(({
  origin: 'https://api.yuki.sh',
});
const result = await totte('/ping');

API

totte(init, config?)
totte.get(url, data?, options?)
totte.post(url, data?, options?)
totte.put(url, data?, options?)
totte.patch(url, data?, options?)
totte.head(url, data?, options?)
totte.delete(url, data?, options?)
totte.create(options?)
totte.useRequestInterceptor(callback?)
totte.useResponseInterceptor(callback?)

Config

The request configuration items are exactly the same as fetch, and the following four additional attributes are added to it:

{
  origin: 'https://api.yuki.sh';
  url: '/ping';
  // options are: 'GET' | 'DELETE' | 'HEAD' | 'POST' | 'PUT' | 'PATCH'
  method: 'GET'; // default
  // options are: 'array buffer' | 'bloom' | 'json' | 'text' | 'formData'
  responseType: 'json', // default
}

About

Totte is the romanization of the Japanese word "取って", which is exactly Fetch in English, and "totte" is also very similar to "tote", so I used it as the name of the project.