fch 2.0.1 → 3.0.2

package/fetch.js

@@ -1,20 +1,26 @@
-import swear from "swear";
-
-// To avoid making parallel requests to the same url if one is ongoing
-const ongoing = new Map();
-
 // Plain-ish object
 const hasPlainBody = (options) => {
   if (options.headers["content-type"]) return;
-  if (typeof options.body !== "object") return;
+  if (!["object", "array"].includes(typeof options.body)) return;
   if (options.body instanceof FormData) return;
   return true;
 };
 
-const createUrl = (path, base) => {
+const createUrl = (url, query, base) => {
+  let [path, urlQuery = {}] = url.split("?");
+
+  // Merge global params with passed params with url params
+  const entries = new URLSearchParams({
+    ...Object.fromEntries(new URLSearchParams(query)),
+    ...Object.fromEntries(new URLSearchParams(urlQuery)),
+  }).toString();
+  if (entries) {
+    path = path + "?" + entries;
+  }
+
   if (!base) return path;
-  const url = new URL(path, base);
-  return url.href;
+  const fullUrl = new URL(path, base);
+  return fullUrl.href;
 };
 
 const createHeaders = (user, base) => {
@@ -31,6 +37,15 @@ const createHeaders = (user, base) => {
   return headers;
 };
 
+const createDedupe = (ongoing, url) => ({
+  save: (prom) => {
+    ongoing.set(url, prom);
+    return prom;
+  },
+  get: () => ongoing.get(url),
+  clear: () => ongoing.delete(url),
+});
+
 const createFetch = (request, { after, dedupe, error, output }) => {
   return fetch(request.url, request).then(async (res) => {
     // No longer ongoing at this point
@@ -70,102 +85,116 @@ const createFetch = (request, { after, dedupe, error, output }) => {
   });
 };
 
-const fch = swear((url, options = {}) => {
-  // Second parameter always has to be an object, even when it defaults
-  if (typeof options !== "object") options = {};
-
-  // Accept either fch(options) or fch(url, options)
-  options = typeof url === "string" ? { url, ...options } : url;
-
-  // Absolute URL if possible; Default method; merge the default headers
-  options.url = createUrl(options.url, fch.baseUrl);
-  options.method = (options.method ?? fch.method).toLowerCase();
-  options.headers = createHeaders(options.headers, fch.headers);
-
-  let {
-    dedupe = fch.dedupe,
-    output = fch.output,
-
-    before = fch.before,
-    after = fch.after,
-    error = fch.error,
-
-    ...request
-  } = options; // Local option OR global value (including defaults)
-
-  if (request.method !== "get") {
-    dedupe = false;
-  }
-  if (dedupe) {
-    dedupe = {
-      save: (prom) => {
-        ongoing.set(request.url, prom);
-        return prom;
-      },
-      get: () => ongoing.get(request.url),
-      clear: () => ongoing.delete(request.url),
-    };
-  }
+const create = (defaults = {}) => {
+  // DEDUPLICATION is created on a per-instance basis
+  // To avoid making parallel requests to the same url if one is ongoing
+  const ongoing = new Map();
+
+  const fch = async (url, options = {}) => {
+    // Second parameter always has to be an object, even when it defaults
+    if (typeof options !== "object") options = {};
+
+    // Accept either fch(options) or fch(url, options)
+    options = typeof url === "string" ? { url, ...options } : url || {};
+
+    // Exctract the options
+    let {
+      dedupe = fch.dedupe,
+      output = fch.output,
+      baseURL = fch.baseURL, // DO NOT USE; it's here only for user friendliness
+      baseUrl = baseURL || fch.baseUrl,
+
+      // Extract it since it should not be part of fetch()
+      query = {},
+
+      // Interceptors can also be passed as parameters
+      before = fch.before,
+      after = fch.after,
+      error = fch.error,
+
+      ...request
+    } = options; // Local option OR global value (including defaults)
+
+    // Merge it, first the global and then the local
+    query = { ...fch.query, ...query };
+    // Absolute URL if possible; Default method; merge the default headers
+    request.url = createUrl(request.url ?? fch.url, query, baseUrl);
+    request.method = (request.method ?? fch.method).toLowerCase();
+    request.headers = createHeaders(request.headers, fch.headers);
+
+    if (request.method !== "get") {
+      dedupe = false;
+    }
+    if (dedupe) {
+      dedupe = createDedupe(ongoing, request.url);
+    }
 
-  if (!["body", "response"].includes(output)) {
-    const msg = `options.output needs to be either "body" (default) or "response", not "${output}"`;
-    throw new Error(msg);
-  }
+    if (!["body", "response"].includes(output)) {
+      const msg = `options.output needs to be either "body" (default) or "response", not "${output}"`;
+      throw new Error(msg);
+    }
 
-  // JSON-encode plain objects
-  if (hasPlainBody(request)) {
-    request.body = JSON.stringify(request.body);
-    request.headers["content-type"] = "application/json; charset=utf-8";
-  }
+    // JSON-encode plain objects
+    if (hasPlainBody(request)) {
+      request.body = JSON.stringify(request.body);
+      request.headers["content-type"] = "application/json; charset=utf-8";
+    }
 
-  // Hijack the requeset and modify it
-  if (before) {
-    request = before(request);
-  }
+    // Hijack the requeset and modify it
+    if (before) {
+      request = before(request);
+    }
 
-  // It should be cached
-  if (dedupe) {
-    // It's already cached! Just return it
-    if (dedupe.get()) return dedupe.get();
+    // It should be cached and it's not being manually manipulated
+    if (dedupe && !request.signal) {
+      // It's already cached! Just return it
+      if (dedupe.get()) return dedupe.get();
 
-    // Otherwise, save it in the cache and return the promise
-    return dedupe.save(createFetch(request, { dedupe, output, error, after }));
-  } else {
-    // PUT, POST, etc should never dedupe and just return the plain request
-    return createFetch(request, { output, error, after });
-  }
-});
+      // Otherwise, save it in the cache and return the promise
+      return dedupe.save(
+        createFetch(request, { dedupe, output, error, after })
+      );
+    } else {
+      // PUT, POST, etc should never dedupe and just return the plain request
+      return createFetch(request, { output, error, after });
+    }
+  };
+
+  // Default values
+  fch.url = defaults.url ?? "/";
+  fch.method = defaults.method ?? "get";
+  fch.query = defaults.query ?? {};
+  fch.headers = defaults.headers ?? {};
+
+  // Default options
+  fch.dedupe = defaults.dedupe ?? true;
+  fch.output = defaults.output ?? "body";
+  fch.credentials = defaults.credentials ?? "include";
+
+  // Interceptors
+  fch.before = defaults.before ?? ((request) => request);
+  fch.after = defaults.after ?? ((response) => response);
+  fch.error = defaults.error ?? ((error) => Promise.reject(error));
+
+  const get = (url, opts = {}) => fch(url, { ...opts });
+  const head = (url, opts = {}) => fch(url, { ...opts, method: "head" });
+  const post = (url, opts = {}) => fch(url, { ...opts, method: "post" });
+  const patch = (url, opts = {}) => fch(url, { ...opts, method: "patch" });
+  const put = (url, opts = {}) => fch(url, { ...opts, method: "put" });
+  const del = (url, opts = {}) => fch(url, { ...opts, method: "delete" });
+
+  fch.get = get;
+  fch.head = head;
+  fch.post = post;
+  fch.patch = patch;
+  fch.put = put;
+  fch.del = del;
+
+  fch.create = create;
+
+  return fch;
+};
 
-// Default values
-fch.method = "get";
-fch.headers = {};
-
-// Default options
-fch.dedupe = true;
-fch.output = "body";
-
-// Interceptors
-fch.before = (request) => request;
-fch.after = (response) => response;
-fch.error = (error) => Promise.reject(error);
-
-const request = (url, opts = {}) => fch(url, { ...opts });
-const get = (url, opts = {}) => fch(url, { ...opts });
-const head = (url, opts = {}) => fch(url, { ...opts, method: "head" });
-const post = (url, opts = {}) => fch(url, { ...opts, method: "post" });
-const patch = (url, opts = {}) => fch(url, { ...opts, method: "patch" });
-const put = (url, opts = {}) => fch(url, { ...opts, method: "put" });
-const del = (url, opts = {}) => fch(url, { ...opts, method: "delete" });
-
-fch.request = request;
-fch.get = get;
-fch.head = head;
-fch.post = post;
-fch.patch = patch;
-fch.put = put;
-fch.del = del;
-
-fch.swear = swear;
+const fch = create();
 
 export default fch;
-export { request, get, head, post, patch, put, del, swear };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fch",
-  "version": "2.0.1",
+  "version": "3.0.2",
   "description": "Fetch interface with better promises, deduplication, defaults, etc.",
   "homepage": "https://github.com/franciscop/fetch",
   "repository": "https://github.com/franciscop/fetch.git",
@@ -9,6 +9,7 @@
   "author": "Francisco Presencia <public@francisco.io> (https://francisco.io/)",
   "license": "MIT",
   "scripts": {
+    "build": "terser --compress --mangle -- ./fetch.js | sed 's/export default fch;/window.fch=fch;/g' > ./index.js",
     "start": "npm run watch # Start ~= Start dev",
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js --coverage --detectOpenHandles",
     "watch": "node --experimental-vm-modules node_modules/jest/bin/jest.js --watch --coverage --detectOpenHandles"
@@ -21,18 +22,19 @@
     "async",
     "ajax"
   ],
-  "main": "fetch.js",
-  "files": [],
+  "main": "./fetch.js",
+  "browser": "./index.js",
+  "files": [
+    "fetch.js"
+  ],
   "type": "module",
   "engines": {
     "node": ">=18.0.0"
   },
-  "dependencies": {
-    "swear": "^1.1.0"
-  },
   "devDependencies": {
     "jest": "^28.0.1",
-    "jest-fetch-mock": "^3.0.3"
+    "jest-fetch-mock": "^3.0.3",
+    "terser": "^5.13.1"
   },
   "jest": {
     "testEnvironment": "jest-environment-node",

package/readme.md

@@ -1,45 +1,49 @@
-# Fch [![npm install fch](https://img.shields.io/badge/npm%20install-fch-blue.svg)](https://www.npmjs.com/package/fch) [![gzip size](https://img.badgesize.io/franciscop/fetch/master/fetch.js.svg?compression=gzip)](https://github.com/franciscop/fetch/blob/master/fetch.js)
+# Fch [![npm install fch](https://img.shields.io/badge/npm%20install-fch-blue.svg)](https://www.npmjs.com/package/fch) [![gzip size](https://img.badgesize.io/franciscop/fetch/master/index.js.svg?compression=gzip)](https://github.com/franciscop/fetch/blob/master/index.js)
 
-A library to make API calls easier. Similar to Axios, but tiny size and simpler API:
+A tiny library to make API calls easier. Similar to Axios, but tiny size and simpler API:
 
 ```js
 import api from "fch";
-const mew = await api("https://pokeapi.co/pokemon/150");
+api.baseUrl = "https://pokeapi.co/";
+const mew = await api.get("/pokemon/150");
 console.log(mew);
 ```
 
-`fch` is a better `fetch()`:
-
-- Automatically `JSON.stringify()` and `Content-Type: 'application/json'` for plain objects.
-- Automatically parse server response as json if it includes the headers, or text otherwise.
-- Works the same way in Node.js and the browser.
-- Await/Async Promise interface works as you know and love.
-- Better error handling. `>= 400 and <= 100` will _reject_ the promise with an error instance.
-- Advanced [Promise interface](https://www.npmjs.com/swear) for better scripting.
-- Easily define shared options straight on the root `fetch.baseUrl = "https://...";`.
-- Interceptors: `before` (the request), `after` (the response) and `error` (it fails).
+- Create instances with shared options across requests.
+- Automatically encode object and array bodies as JSON.
+- Automatically decode JSON responses based on the headers.
+- Await/Async Promises; `>= 400 and <= 100` will _reject_ with an error.
+- Interceptors: `before` the request, `after` the response and catch with `error`.
 - Deduplicates parallel GET requests.
-- Configurable to return either just the body, or the full response.
-- [TODO]: cache engine with "highs" and "lows", great for scrapping
-- [TODO]: rate-limiting of requests (N-second, or N-parallel), great for scrapping
-
-These are the available options and their defaults:
-
-- `api.baseUrl = null;`: Set an API endpoint
-- `api.method = 'get';`: Default method to use for api()
-- `api.headers = {};`: Merged with the headers on a per-request basis
-- `api.dedupe = true;`: Avoid parallel GET requests to the same path
-- `api.output = 'body';`: Return the body; use 'response' for the full response
-- `api.before = req => req;`: Interceptor executed before sending the request
-- `api.after = res => res;`: Handle the responses before returning them
-- `api.error = err => Promise.reject(err);`: handle any error thrown by fch
-- `api(url, { method, body, headers, ... })`
-- `api.get(url, { headers, ... });`: helper for convenience
-- `api.head(url, { headers, ... });`: helper for convenience
-- `api.post(url, { body, headers, ... });`: helper for convenience
-- `api.patch(url, { body, headers, ... });`: helper for convenience
-- `api.put(url, { body, headers, ... });`: helper for convenience
-- `api.del(url, { body, headers, ... });`: helper for convenience
+- Works the same way in Node.js and the browser.
+- No dependencies; include it with a simple `<script>` on the browser.
+
+```js
+import api from 'fch';
+
+api.get(url, { headers, ...options })
+api.head(url, { headers, ...options })
+api.post(url, { body, headers, ...options })
+api.patch(url, { body, headers, ...options })
+api.put(url, { body, headers, ...options })
+api.del(url, { body, headers, ...options })
+
+api.create({ url, body, headers, ...options})
+```
+
+| Options               | Default   | Description                        |
+| ----------------------| ----------| -----------------------------------|
+| [`method`](#method)   | `"get"`   | Default method to use for the call |
+| [`url`](#url)         | `null`    | The path or url for the request    |
+| [`baseUrl`](#url)     | `null`    | The shared base of the API         |
+| [`body`](#body)       | `null`    | The body to send with the request  |
+| [`query`](#query)     | `{}`      | Add query parameters to the URL    |
+| [`headers`](#headers) | `{}`      | Shared headers across all requests |
+| [`output`](#output)   | `"body"`  | The return value of the API call   |
+| [`dedupe`](#dedupe)   | `true`    | Reuse concurrently GET requests    |
+| [`before`](#interceptors) |`req => req`       |Process the request before sending it    |
+| [`after`](#interceptors)  |`res => res`       |Process the response before returning it |
+| [`error`](#interceptors)  |`err => throw err` |Process errors before returning them     |
 
 ## Getting Started
 
@@ -52,58 +56,94 @@ npm install fch
 Then import it to be able to use it in your code:
 
 ```js
-import api from 'fch';
+import fch from 'fch';
+const body = await fch.get('/');
+```
 
-const data = await api.get('/');
+On the browser you can add it with a script and it will be available as `fch`:
+
+```html
+<!-- Import it as usual -->
+<script src="https://cdn.jsdelivr.net/npm/fch"></script>
+<script>
+  fch('/hello');
+</script>
 ```
 
 ## Options
 
+These are all available options and their defaults:
+
 ```js
-import api, { get, post, put, ... } from 'fch';
+import api from 'fch';
 
-// General options with their defaults; most of these are also parameters:
-api.baseUrl = null;  // Set an API endpoint
+// General options with their defaults; all of these are also parameters:
 api.method = 'get';  // Default method to use for api()
-api.headers = {};    // Is merged with the headers on a per-request basis
+api.url = '/';       // Relative or absolute url where the request is sent
+api.baseUrl = null;  // Set an API base URL reused all across requests
+api.query = {};      // Merged with the query parameters passed manually
+api.headers = {};    // Merged with the headers on a per-request basis
 
 // Control simple variables
-api.dedupe = true;   // Avoid parallel GET requests to the same path
 api.output = 'body'; // Return the body; use 'response' for the full response
+api.dedupe = true;   // Avoid sending concurrent GET requests to the same path
 
 // Interceptors
 api.before = req => req;
 api.after = res => res;
 api.error = err => Promise.reject(err);
+```
 
-// Similar API to fetch()
-api(url, { method, body, headers, ... });
+They can all be defined globally as shown above, passed manually as the options argument, or be used when [creating a new instance](#create-an-instance).
 
-// Our highly recommended style:
-api.get(url, { headers, ... });
-api.post(url, { body, headers, ... });
-api.put(url, { body, headers, ... });
-// ...
+### Method
 
-// Just import/use the method you need
-get(url, { headers, ... });
-post(url, { body, headers, ... });
-put(url, { body, headers, ... });
-// ...
+The HTTP method to make the request. When using the shorthand, it defaults to `GET`. We recommend using the method syntax:
+
+```js
+import api from 'fch';
+
+api.get('/cats');
+api.post('/cats', { body: { name: 'snowball' } });
+api.put(`/cats/3`, { body: { name: 'snowball' }});
+```
+
+You can use it with the plain function as an option parameter. The methods are all lowercase but the option as a parameter is case insensitive; it can be either uppercase or lowercase:
+
+```js
+// Recommended way of dealing with methods:
+api.get(...);
+
+// INVALID; won't work
+api.GET(...);
+
+// Both of these are valid:
+api({ method; 'GET' })
+api({ method; 'get'})
 ```
 
-### URL
+Example: adding a new cat and fixing a typo:
 
-This is normally the first argument, though technically you can use both styles:
+```js
+import api from 'fch';
+
+const cats = await api.get('/cats');
+console.log(cats);
+const { id } = await api.post('/cats', { body: { name: 'snowbll' } });
+await api.put(`/cats/${id}`, { body: { name: 'snowball' }})
+```
+
+### Url
+
+Specify where to send the request to. It's normally the first argument, though technically you can use both styles:
 
 ```js
-// All of these methods are valid
 import api from 'fch';
 
-// We strongly recommend using this style for your normal code:
+// Recommended way of specifying the Url
 await api.post('/hello', { body: '...', headers: {} })
 
-// Try to avoid these, but they are also valid:
+// These are also valid if you prefer their style; we won't judge
 await api('/hello', { method: 'post', body: '...', headers: {} });
 await api({ url: '/hello', method: 'post', headers: {}, body: '...' });
 await api.post({ url: '/hello', headers: {}, body: '...' });
@@ -118,9 +158,11 @@ api.get('/hello');
 // Called https//api.filemon.io/hello
 ```
 
+> Note: with Node.js you need to either set an absolute baseUrl or make the URL absolute
+
 ### Body
 
-The `body` can be a string, a FormData instance or a plain object. If it's an object, it'll be stringified and the header `application/json` will be added. Otherwise it'll be sent as plain text:
+The `body` can be a string, a plain object|array or a FormData instance. If it's an array or object, it'll be stringified and the header `application/json` will be added. Otherwise it'll be sent as plain text:
 
 ```js
 import api from 'api';
@@ -137,6 +179,46 @@ form.onsubmit = e => {
 };
 ```
 
+The methods `GET` and `HEAD` do not accept a body and it'll be ignored.
+
+The **response body** will be returned by default as the output of the call:
+
+```js
+const body = await api.get('/cats');
+console.log(body);
+// [{ id: 1, }, ...]
+```
+
+When the server specifies the header `Content-Type` as `application/json`, then we'll attempt to parse the response body and return that as the variable. Otherwise, the plain text will be returned.
+
+When the function returns the response (if you set `output: "response"` as an option), then the body can be accessed as `response.body`:
+
+```js
+const response = await api.get('/cats', { output: 'response' });
+console.log(response.body);
+// [{ id: 1, }, ...]
+```
+
+
+### Query
+
+You can easily pass GET query parameters by using the option `query`:
+
+```js
+api.get('/cats', { query: { limit: 3 } });
+// /cats?limit=3
+```
+
+While rare, some times you might want to persist a query parameter across requests and always include it; in that case, you can define it globally and it'll be added to every request:
+
+```js
+import api from 'fch';
+api.query.myparam = 'abc';
+
+api.get('/cats', { query: { limit: 3 } });
+// /cats?limit=3&myparam=abc
+```
+
 
 ### Headers
 
@@ -145,13 +227,28 @@ You can define headers globally, in which case they'll be added to every request
 
 ```js
 import api from 'fch';
-api.headers.abc = 'def';
 
-api.get('/helle', { headers: { ghi: 'jkl' } });
+// Globally, so they are reused across all requests
+api.headers.a = 'b';
+
+// With an interceptor, in case you need dynamic headers per-request
+api.before = req => {
+  req.headers.c = 'd';
+  return req;
+};
+
+// Set them for this single request:
+api.get('/hello', { headers: { e: 'f' } });
 // Total headers on the request:
-// { abc: 'def', ghi: 'jkl' }
+// { a: 'b', c: 'd', e: 'f' }
 ```
 
+When to use each?
+
+- If you need headers shared across all requests, like an API key, then the global one is the best place.
+- When you need to extract them dynamically from somewhere it's better to use the .before() interceptor. An example would be the user Authorization token.
+- When it changes on each request, it's not consistent or it's an one-off, use the option argument.
+
 
 ### Output
 
@@ -198,7 +295,7 @@ fch('/a', { dedupe: true });  // [DEFAULT] Dedupes GET requests
 fch('/a', { dedupe: false })  // All fetch() calls trigger a network call
 ```
 
-> We do not support deduping other methods right now besides `GET` right now
+> We do not support deduping other methods besides `GET` right now
 
 Note that opting out of deduping a request will _also_ make that request not be reusable, see this test for details:
 
@@ -250,45 +347,6 @@ fch.error = async err => {
 ```
 
 
-
-### Advanced promise interface
-
-This library uses [the `swear` promise interface](https://www.npmjs.com/swear), which allows you to query operations seamlessly on top of your promise:
-
-```js
-import api from "fch";
-
-// You can keep performing actions like it was sync
-const firstFriendName = await api.get("/friends")[0].name;
-console.log(firstFriendName);
-```
-
-### Define shared options
-
-You can also define values straight away:
-
-```js
-import api from "fch";
-
-api.baseUrl = "https://pokeapi.co/";
-
-const mew = await api.get("/pokemon/150");
-console.log(mew);
-```
-
-If you prefer Axios' style of outputting the whole response, you can do:
-
-```js
-// Default, already only returns the data on a successful call
-api.output = "data";
-const name = await api.get("/users/1").name;
-
-// Axios-like
-api.output = "response";
-const name = await api.get("/users/1").data.name;
-```
-
-
 ## How to
 
 ### Stop errors from throwing
@@ -340,7 +398,7 @@ const body = await fch.get('/blabla');
 ```
 
 
-### Set the authorization headers
+### Set authorization headers
 
 You can set that globally as a header:
 
@@ -375,3 +433,94 @@ import fch from 'fch';
 
 const me = await fch('/users/me', { headers: { Authorization: 'bearer abc' } });
 ```
+
+
+### Create an instance
+
+You can create an instance with its own defaults and global options easily. It's common when writing an API that you want to encapsulate away:
+
+```js
+import fch from 'fch';
+
+const api = fch.create({
+  baseUrl: 'https://api.filemon.io/',
+  ...
+});
+
+api.get('/hello');   // Gets https://api.filemon.io/hello
+fch.get('/hello');   // Gets http://localhost:3000/hello (or wherever you are)
+```
+
+Note: for server-side (Node.js) usage, you always want to set `baseUrl`.
+
+
+
+### Cancel ongoing requests
+
+You can cancel ongoing requests [similarly to native fetch()](https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort#examples), by passing it a signal:
+
+```js
+import api from 'fch';
+
+const controller = new AbortController();
+const signal = controller.signal;
+
+abortButton.addEventListener('click', () => {
+  controller.abort();
+  console.log('Download aborted');
+});
+
+api.get(url, { signal });
+```
+
+
+
+### Define shared options
+
+You can also define values straight away:
+
+```js
+import api from "fch";
+
+api.baseUrl = "https://pokeapi.co/";
+
+const mew = await api.get("/pokemon/150");
+console.log(mew);
+```
+
+You can also [create an instance](#create-an-instance) that will have the same options for all requests made with that instance.
+
+
+
+### Node.js vs Browser
+
+First, we use the native Node.js' fetch() and the browser's native fetch(), so any difference between those also applies to this library. For example, if you were to call `"/"` in the browser it'd refer to the current URL, while in Node.js it'd fail since you need to specify the full URL. Some other places where you might find differences: CORS, cache, etc.
+
+In the library itself there's nothing different between the browser and Node.js, but it might be interesting to note that (if/when implemented) things like cache, etc. in Node.js are normally long-lived and shared, while in a browser request it'd bound to the request itself.
+
+
+
+### Differences with Axios
+
+The main difference is that things are simplified with fch:
+
+```js
+// Modify headers
+axios.defaults.headers.Authorization = '...';
+fch.headers.Authorization = '...';
+
+// Set a base URL
+axios.defaults.baseURL = '...';
+fch.baseUrl = '...';
+
+// Add an interceptor
+axios.interceptors.request.use(fn);
+fch.before = fn;
+```
+
+API size is also strikingly different, with **7.8kb** for Axios and **1.1kb** for fch.
+
+As disadvantages, I can think of two major ones for `fch`:
+
+- Requires Node.js 18+, which is the version that includes `fetch()` by default.
+- Does not support many of the more advanced options, like `onUploadProgress` nor `onDownloadProgress`.