fetch-me-json

High level fetch API

Usage no npm install needed!

<script type="module">
  import fetchMeJson from 'https://cdn.skypack.dev/fetch-me-json';
</script>

README

fetch-me-json

High level API for fetch with sensible defaults making client server requests a breeze.

Installation

npm i fetch-me-json

Usage

Convention

import JSONFetch from 'fetch-me-json'

JSONFetch.<<method>>(<<endpoint>>, <<JSON-payload>>)
    .then(<<JSON-ResponseBody>> => ...)
    .catch(<<errorMessage>> => ...)

GET requests

import JSONFetch from 'fetch-me-json'
JSONFetch.get('/resources/1')
    .then(bodyInJSON => console.log(bodyInJSON))
    .catch(errorMessage => console.log(errorMessage))

You can also pass query parameters.

import JSONFetch from 'fetch-me-json'
JSONFetch.get('/resources/1', {
    optional_parameter: 1
})

POST, PUT, PATCH, DELETE

import JSONFetch from 'fetch-me-json'

JSONFetch.post('/resources', {
    id: 1,
    name: 'Tyler',
    type: 1,
})

JSONFetch.delete('/resources/1')

JSONFetch.put('/resources/1', {
    name: 'Durden',
    type: 1,
})

JSONFetch.patch('/resources/1', {
    type: 2,
})

Advanced

internal fetch

These are the internal fetch options that will be applied. You can configure these to your liking (see below).

{
    mode: 'same-origin',
    credentials: 'same-origin',
    headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
    },
}

Configurations

import JSONFetch from 'fetch-me-json'

const configurations = {
    errorKey: 'error'
}

JSONFetch.config(configurations)

List of possible configurations

key description default
errorKey The key (from the response) that should be thrown in the case of an error. Pass null to throw entire response message
defaultPayload define default payload you always want to pass along
fetch parameters to be passed down to the global fetch method, overrides default parameters see internal fetch above
baseURL URL to be prepended for every request's endpoint. E.g. /api or http://localhost:3000

Differences to native fetch

  • uses and accepts JSON by default
  • throws an error when response is not ok

If you need to support older browsers be sure to include the polyfill.

Catching the response status code

JSONFetch returns a custom HttpError object with a status property that you can make use of.

import JSONFetch from 'fetch-me-json'

JSONFetch.get('/resource').catch(error => {
    if (error instanceof JSONFetch.HttpError) {
        console.log(error.status)
    }
})