Supafetch

Simple fetch wrapper inspired by axios

• Installing
• API

• Example Usage

  • Background

  ---

Installing

1. Install some polyfills if you're supporting old browser, skip this if you aren't. ( Note: node and some modern browsers support fetch and promise natively )

   yarn add es6-promise whatwg-fetch

2. Install supafetch

   yarn add supafetch

API

  import supafetch from 'supafetch'

Core

  supafetch.get(url, options) /* GET */
  supafetch.post(url, options) /* POST */
  supafetch.delete(url, options) /* DELETE */
  supafetch.put(url, options) /* PUT */
  supafetch.patch(url, options) /* PATCH */

options is some configuration that u can use when request ( you can use all of fetch's options as well.

  options = {
    headers: {
      'Accept': 'application/json',
      // Content-Type that will effect request body's transformation.
      /*  1. 'application/json' [default]
          2. 'multipart/form-data'
          3. 'application/x-www-form-urlencoded'
      */
      'Content-Type': 'multipart/form-data',
    },

    // Params for query string
    params: {
      page: 1,
      limit: 15,
    },

    // Request body that will be transformed
    data: {
      email: 'username@example.org',
      password: 'secret',
    }

  // ... see github's fetch
  }

Set base URL

  supafetch.setBaseUrl('https://example.org/api')

To set default header, you can use

  supafetch.setDefaultHeaders({
    'Authorization': 'Bearer somerandomtoken',
  })

Interceptors

  supafetch.setResponseInterceptor(
    (successResponse) => {
    // do something with res
      someFunctionThatModify(successResponse)
      return successResponse
    },
    (failedResponse) => failedResponse
    )

  supafetch.setRequestInterceptor(
    config => someFunctionThatModify(config)
  )
  // you still have to return request's config or response even though you don't modify it.

Example Usage

  import supafetch from 'supafetch'
  import humps from 'humps'

  supafetch.setBaseUrl('https://example.org/api')
  supafetch.setDefaultHeaders({
    'X-Requested-With': 'XMLHttpRequest',
    'Content-Type': 'application/json',
  })

  supafetch.setResponseInterceptor(
    res => humps.camelizeKeys(res),
    err => {
      if (err.response && err.response.status === 401 {
        doLogout()
      }
      return err
    }
  )

  supafetch.setRequestInterceptor((config) => {
    config.params = config.params || {}
    config.params.locale = 'en'
    return config
  })

  supafetch.post('post/create', {
    data: {
      content: "lorem ipsum",
    },
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    }
  })
    .then(resp => {
      // your logic
    })
    .catch(err => {alert(err)})

  supafetch.get('posts', {
      params: {
      page: 2,
      limit: 15,
    }
  })
    .then(resp => {
      // your logic
    })
    .catch(err => {alert(err)})

Background

Because axios doesn't support http caching out of the box, so we decided to write a simple wrapper on top of fetch which resembles axios' api.