Skip to content

MZanggl/fetch-me-json

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 

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)
    }
})

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published