Axios-like fetch

request.js

const queryString = (params) => {
  const qs = String(new URLSearchParams(params));
  return qs ? `?${qs}` : "";
};

const joinBase = (url, baseUrl) =>
  `${baseUrl.replace(/\/$/, "")}/${url.replace(/^\/|\/$/, "")}/`;

const contentTypeJson = { "Content-Type": "application/json" };

export const createRequest = (baseConfig) => (customConfig) => {
  const config = { ...baseConfig, ...customConfig };
  const { baseUrl, url, data, params, fn, silent, ...init } = config;
  const resource = `${joinBase(url, baseUrl)}${queryString(params)}`;

  if (data) {
    Object.assign(init, {
      headers: { ...contentTypeJson, ...config.headers },
      body: JSON.stringify(data),
    });
  }

  const request = new Request(resource, init);

  const handleRequestErrors = (response) => {
    if (!response.ok) {
      const error = Error(response.statusText);
      Object.assign(error, { response, config, request });
      throw error;
    }
    return response;
  };

  return fetch(request)
    .then(!silent ? handleRequestErrors : (x) => x)
    .then(async (response) => {
      let jsonData;
      try {
        jsonData = await response.json();
      } catch (error) {
        /* skip */
      }
      return fn
        ? fn({ config, request, response, jsonData, resource, init, baseConfig })
        : jsonData;
    });
};

export const request = createRequest();

usage.js

import { createRequest } from "./request";

const request = createRequest({
  baseUrl: "https://example.com/api",
  redirect: "error"
});

const ENDPOINT = {
  user: () => (id) => `user/${id}`,
  confirm: () => 'confirm',
  otherEndpoint: (params) => "blabla",
};

export const getUser = (id) => request({ url: ENDPOINT.user(id) });

export const confirm = (id) => request({
  url: ENDPOINT.confirm(),
  data: { id },
  fn: ({ jsonData: user, config }) => config.data.id === user.id
})