Is fetch too low-level? Do you have a favorite wrapper?

#discuss #fetch #javascript #typescript

Furthermore, I am not sure about node-fetch or isomorphic-fetch, on Node.js's side.

What is surprising about fetch, is that it does not "raise-for-status" by default. Similarly, not sure about XMLHTTPRequest, where I rarely use it natively. See XMLHTTPRequest vs fetch.

Maybe a relatively safe way is to do it like this.

import deepMerge from './util'

export function createApi<
  T extends Record<
    string,
    {
      options: RequestInit
      response: any
    }
  >
>({
  validate = (r) => {
    if (!r.ok) throw new Error(`${r.status}: ${r.statusText}`)
  },
  parse = (r) => r.json(),
  options = {},
}: {
  validate?: (r: Response) => void
  parse?: (r: Response) => Promise<any>
  options?: RequestInit
} = {}) {
  return async <K extends keyof T>(
    url: K,
    opts: T[K]['options'] = {}
  ): Promise<T[K]['response']> => {
    return fetch(url as string, deepMerge(options, opts)).then(async (r) => {
      validate(r)
      return parse(r)
        .then((r) => {
          if (r.error) throw new Error(r.error)
          return r
        })
    })
  }
}