http-with-fetch

A tiny (1 kb) abstraction over the fetch API.

Description

http-with-fetch provides an easier way to write APIs using fetch.

Installation

npm i http-with-fetch --save

Note

This library uses the native fetch if supported. You can pass a fetch polyfill if you are using this in an environment where native fetch isn't supported (for ex. node, old browsers)

Usage

Intended to be used as a ES6 module ( import ) or using require.

import HTTP from 'http-with-fetch'
let userService = new HTTP('/users', some-fetch-polyfill)

Motivation

Consider the following code

let options = { mode: 'cors' }

fetch('/resource/point1', options)

fetch('/resource/point2', options)

fetch('/resource/point3', options)
  
fetch('/resource/point4', options)

If you were to do a POST at /resource/point3, then you can't reuse options in the fetch call and the code would then become

let options = { mode: 'cors' }

let data = { 'some': 'data' }

fetch('/resource/point1', options)

fetch('/resource/point2', options)

fetch('/resource/point3', {
  mode: 'cors',
  method: 'POST',
  headers: {
    'content-type': 'application/json'
  }
  body: JSON.stringify(data)
})
  
fetch('/resource/point4', options)

This problem increases when each fetch does some common things and also its own specific stuff.

With http-with-fetch it can be rewritten as,

const HTTP = require('http-with-fetch')

let http = new HTTP('/resource/')

const data = { 'some': 'data' }

http.use(http.add('mode', 'cors'))

http.get('point1')

http.get('point2')

http.post('point3', JSON.stringify(data), http.add('headers', {'content-type': 'application/json'}))

http.get('point4')

API

HTTP(base: String, fetch: Fetch?)

Creates a new object.

Arguments	Description
base	The base url of the resource.
fetch	A Fetch polyfill. Only needed if the environment doesn't support fetch by default.

add(key: String, val: String | Object)

Helper method to create interceptors.

use(interceptor: Function)

Adds an common interceptor. All requests will be intercepted by this.

method(url: String, type: String, verb: String, ...interceptors: Function[])

Make a request.

Arguments	Description
url	The url of the resource (relative to the base URL)
type	The response type. Can be one of ['json', 'text', 'formData', 'blob', 'arrayBuffer', 'none']. Default is json
verb	HTTP method to use. Uppercase only.
interceptors	Interceptors specific to this request.

get(url: String, type: String, ...interceptors: Function[])

An alias for method with verb=GET

post(url: String, data: Body, type: String, ...interceptors: Function[])

An alias for method with verb=POST

Arguments	Description
data	The body of the POST request