Tiny wrapper around fetch

api.ts

// Extends the return of the HTTPError class
class HTTPError extends Error {
  readonly response: any;
  readonly status: number;
  readonly statusText: string;

  constructor(status: number, statusText: string, response: any) {
    super(statusText);
    this.status = status;
    this.statusText = statusText;
    this.response = response;
  }
}

const createQuery =
  (baseURL: RequestInfo | URL = '', baseInit?: RequestInit) =>
    <TResponse = unknown>(url: RequestInfo | URL, init?: RequestInit) =>
      fetch(`${baseURL}${url}`, { ...baseInit, ...init }).then(async (res) => {
        // Now, we get the JSON response early
        const response = await res.json()

        if (!res.ok)
          throw new HTTPError(res.status, res.statusText, response);

         return response as TResponse
       })

// In this function, we define our base URL and headers.
const query = createQuery(
  'https://dummyjson.com',
  {
    headers: {
      'Content-Type': 'application/json',
      // 'Authorization': `Bearer ${getToken()}`, // If you need to add a token to the header, you can do it here.
    },
  })


const makeRequest = (method: RequestInit['method']) =>
  <TResponse = unknown, TBody = Record<string, unknown>>(url: RequestInfo | URL, body: TBody) =>
    query<TResponse>(url, {
      method,
      body: JSON.stringify(body),
     })

export const api = {
  get: query,
  post: makeRequest('POST'),
  delete: makeRequest('DELETE'),
  put: makeRequest('PUT'),
  patch: makeRequest('PATCH'),
}

Nice! My simplified version looks like this:

class HTTPError extends Error {
  readonly response: any
  readonly status: number
  readonly statusText: string

  constructor(status: number, statusText: string, response: any) {
    super(statusText)
    this.status = status
    this.statusText = statusText
    this.response = response
  }
}

export default function createHttpClient(baseURL: string, authorization: string) {
  function makeRequest(method: string) {
    return async <TResponse>(url: string, body: Record<string, unknown>) => {
      const res = await fetch(`${baseURL}${url}`, {
        method,
        headers: {
          'Content-Type': 'application/json',
          'Authorization': authorization,
        },
        body: JSON.stringify(body),
      })

      const response = await res.json()
      if (!res.ok) throw new HTTPError(res.status, res.statusText, response)
      return response as TResponse
    }
  }

  return {
    get: makeRequest('GET'),
    post: makeRequest('POST'),
    delete: makeRequest('DELETE'),
    put: makeRequest('PUT'),
    patch: makeRequest('PATCH'),
  }
}