A simple Fetch implementation

Fetcher.js

const baseURL = process.env.API_ADDR || 'http://localhost/api'

export type Pagination<T> = {
  meta: {
    total: number
  }
  data: T
}

export interface Fetcher {
  get<T>(path: string, jwt: string): Promise<T>
  post<T>(path: string, jwt: string, data?: any): Promise<T>
  put<T>(path: string, jwt: string, data?: any): Promise<T>
  delete<T>(path: string, jwt: string, data?: any): Promise<T>
}

type Method = 'GET' | 'POST' | 'PUT' | 'DELETE'

const call = async <T>(path: string, method: Method, jwt: string, data: any): Promise<T> => {
  const initConfig: { [key: string]: any } = {
    mode: 'cors',
    credentials: 'include',
    method,
  }

  if (data) {
    initConfig.body = typeof data !== 'string' ? JSON.stringify(data) : data
  }

  if (jwt && jwt !== '') {
    initConfig.headers['Authorization'] = `BEARER ${jwt}`
  }

  const resp = await fetch(path, initConfig)
  // since status 204 (No Content) should not have any payload,
  // we will return right away
  if (resp.status === 204) {
    return
  }

  const body = await resp.json()
  if (resp.status >= 400) {
    throw { code: resp.status, error: body.error }
  }

  return body as T
}

class DefaultFetcher implements Fetcher {
  host: string

  constructor(host: string) {
    this.host = host
  }

  get = <T>(path: string, jwt: string): Promise<T> => {
    return call<T>(`${this.host}${path}`, 'GET', jwt, undefined)
  }

  post = <T>(path: string, jwt: string, data: any = undefined): Promise<T> => {
    return call<T>(`${this.host}${path}`, 'POST', jwt, data)
  }

  put = <T>(path: string, jwt: string, data: any = undefined): Promise<T> => {
    return call<T>(`${this.host}${path}`, 'PUT', jwt, data)
  }

  delete = <T>(path: string, jwt: string, data: any = undefined): Promise<T> => {
    return call<T>(`${this.host}${path}`, 'DELETE', jwt, data)
  }
}

export default new DefaultFetcher(baseURL) as Fetcher